努力在AngularDart中实现选项卡 [英] Struggling to implement tabs in AngularDart

问题描述

我想学习Dart和AngularDart。最初所有的都是好的，直到我决定尝试和实现一个tab组件基于类似于Angular主页的例子

 < tab> 
< panel name =betty> 
 betty标签的内容
< / panel> 
< panel name =bob> 
 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 {
 
字符串名称; 
 TabComponent选项卡; 
 
 TabPanelComponent（this.tab）{
 tab.add（this）; 
} 
} 
  

以下html模板

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> 
  

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

我觉得我接近但是缺少明显的东西。

解决方案

TabComponent的NgComponent注释缺少了一个可以帮助一个Dart新手的指针或建议。可见性选项。这应该从默认值更改为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 {
 ... 
  pre> 
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中实现选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！