dart - 努力在 AngularDart 中实现选项卡

Question

我正在尝试学习 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 实例列表中的 Pane 以及在 TabPanelComponent 的两个实例中设置的 name 属性。

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

Answer 1

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 {
...