4

我正在尝试学习 Dart 和 AngularDart。最初一切都很好，直到我决定尝试基于类似于 Angular 主页的示例实现一个选项卡组件，例如

<tab>
  <panel name="betty">
  Content of betty tab
  </panel>
  <panel name="bob">
  Content of bob tab
  </panel>
</tab>

我已经实现了以下组件。

@NgComponent(
    selector: 'tab',
    templateUrl: 'components/tab_component.html',
    cssUrl: "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css",
    publishAs: 'ctrl'
)
class TabComponent {

    List<TabPanelComponent> panes = new List();

    add(TabPanelComponent tab) {
      panes.add(tab);
    }
}

@NgComponent(
    selector: 'panel',
    templateUrl: 'components/tab_panel.html',
    publishAs: 'ctrl',
    map: const {
      'name': '@name'
    }
)
class TabPanelComponent {

  String name;
  TabComponent tab;

  TabPanelComponent(this.tab) {
    tab.add(this);
  }
}

以及以下 html 模板

组件/tab_component.html

<div class="tabble">

  <ul class="nav nav-tabs">
    <li ng-repeat="pane in ctrl.panes"><a href="#">{{pane.name}}</a></li>
  </ul>

  <div class="tab-content">
    <content></content>
  </div>

</div>

组件/tab_panel.html

<div class="tab-pane">
  <content></content>
</div>

运行时，components/tab_component.html 中的 ctrl.panes 为空，因此不显示选项卡名称列表。我可以单步执行代码并查看在 TabComponent 实例中添加到列表中的窗格以及在 TabPanelComponent 的两个实例中设置的 name 属性。

我觉得我很接近，但缺少一些明显的东西。有人可以提供帮助 Dart 新手的任何指示或建议将不胜感激。

4

2 回答 2

2

TabComponent 的 NgComponent 注释缺少可见性选项。这应该从默认更改为 CHILDREN_VISIBILITY

@NgComponent(
    visibility: NgDirective.CHILDREN_VISIBILITY,
    selector: 'tab',
    templateUrl: 'components/tab_component.html',
    cssUrl: "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css",
    publishAs: 'ctrl'
)
class TabComponent {
...
于 2013-12-12T06:46:37.183 回答
0

我设法实现了一个工作选项卡组件。问题是，你的方法和我的方法非常相似，我看不出它们之间的区别。尽管如此，这是我的工作解决方案： GitHub 上的代码

于 2014-04-29T22:06:52.350 回答