我正在尝试学习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新手的指示或建议都将受到赞赏。
答案 0 :(得分: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 {
...
答案 1 :(得分:0)
我设法实现了一个工作标签组件。事实是,你的方法和我的方法是如此相似,我没有看到它们之间的区别。尽管如此,这是我的工作解决方案: code at GitHub