努力在AngularDart中实现选项卡

2023年2月22日 214次阅读

我正在努力学习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实例的列表中,而name属性是在TabPanelComponent的两个实例中设置的.

我觉得我很亲密但却遗漏了一些明显的东西.任何人可以提供帮助Dart新手的指示或建议将不胜感激.

最佳答案 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 {
...
点赞