![努力在]( "努力在")
本文介绍了努力在 AngularDart 中实现选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试学习 Dart 和 AngularDart.最初一切都很好，直到我决定尝试基于类似于 Angular 主页的示例实现选项卡组件，例如
<面板名称=贝蒂">贝蒂标签的内容</面板><面板名称="bob">鲍勃标签的内容</面板></tab>
我已经实现了以下组件.
@NgComponent(选择器:'标签'，templateUrl: 'components/tab_component.html',cssUrl: "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css",发布为:'ctrl')类选项卡组件{List窗格 = 新列表()；添加(TabPanelComponent 选项卡){窗格.添加(标签)；}}@NgComponent(选择器:'面板'，templateUrl: 'components/tab_panel.html',发布为:'ctrl'，地图:const {'姓名':'@姓名'})类 TabPanelComponent {字符串名称；TabComponent 选项卡；TabPanelComponent(this.tab) {tab.add(this);}}
以及以下 html 模板
components/tab_component.html
<ul class="nav nav-tabs"><li ng-repeat="ctrl.panes 中的窗格"><a href="#">{{pane.name}}</a></li><div class="tab-content"><内容></内容>
components/tab_panel.html
<内容></内容>
运行时，components/tab_component.html 中的 ctrl.panes 为空，因此不显示选项卡名称列表.我可以单步执行代码并查看添加到 TabComponent 实例列表中的窗格以及在 TabPanelComponent 的两个实例中设置的 name 属性.
我觉得我很接近但缺少一些明显的东西.如果有人可以提供帮助 Dart 新手的任何指示或建议，我们将不胜感激.
解决方案
TabComponent 的 NgComponent 注释缺少可见性选项.这应该从默认更改为 CHILDREN_VISIBILITY
@NgComponent(可见性:NgDirective.CHILDREN_VISIBILITY，选择器:'标签'，templateUrl: 'components/tab_component.html',cssUrl: "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css",发布为:'ctrl')类选项卡组件{...
I am trying to learn Dart and AngularDart. Initially all was good until I decided to try and implement a tab component based on the example similar to the Angular home page e.g.
<tab>
<panel name="betty">
Content of betty tab
</panel>
<panel name="bob">
Content of bob tab
</panel>
</tab>
I have implemented following components.
@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);
}
}
And the following html templates
components/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>
components/tab_panel.html
<div class="tab-pane">
<content></content>
</div>
When run, ctrl.panes in components/tab_component.html is empty, hence the list of tab names are not displayed. I can step through the code and see the panes being added to the list in TabComponent instance and the name attribute being set in the two instances of TabPanelComponent.
I feel that I am close but missing something obvious. Any pointers or advice that someone could offer to help a Dart newbie would be appreciated.
解决方案
The NgComponent annotation for TabComponent was missing the visibility option. This should be changed from the default to 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 {
...
这篇关于努力在 AngularDart 中实现选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！