AngularDart：如何在自定义组件模板中包含子组件答案

【问题标题】：AngularDart: How to include subcomponents in a custom component templateAngularDart：如何在自定义组件模板中包含子组件
【发布时间】：2014-09-08 21:07:31
【问题描述】：

我在 AngularDart 中创建了一个标签组件

@Component(
    visibility: Directive.CHILDREN_VISIBILITY,
    selector: "rtabs",
    templateUrl: "packages/myapp/components/rtabs.html",
    publishAs: "cmp",
    useShadowDom: false
)
class RTabsComponent {
    @NgAttr('label')
    String label;

    int selectedTabIndex = 0;

    RTabsComponent(){
    }

    var tabs = new List<RTabComponent>();

    add(RTabComponent tab) {
        tabs.add(tab);
    }
}

@Component(
    selector: "rtab",
    template: "<content></content >",
    publishAs: "cmp",
    useShadowDom: false
)
class RTabComponent {    
    @NgAttr('name')
    String name;

    RTabComponent(RTabsComponent tabs){
        tabs.add(this);
    }
}

我对组件的使用就像

<rtabs label="System Settings">
    <rtab name="test">test 123</rtab>
    <rtab name="test 2">test abc</rtab>
    <rtab name="test 3"><input-custom ng-model="cmp.somevalue"></input-custom></rtab>
</rtabs>

我在渲染 rtabs 组件模板中的 rtab 内容时遇到问题。我不确定正确的语法是什么。

如果我这样做

<div ng-repeat="tab in cmp.tabs">
{{tab}}
</div>

它只是打印出“'RTabComponent'的实例”，这是可以理解的。

但是我将如何遍历模板中的 cmp.tabs 并呈现 rtab 的实际内容？

我需要内容与 ng-model 内容和其他组件（例如第三个选项卡中的组件）一起使用。

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

回答我自己的问题。

将模板添加到 rtab 中

<div ng-class="{'tab-pane': true, active: cmp.active}">
    <content></content>
</div>

在 rtabs.html 中

<div class="tab-content">
    <content></content>
</div>

【讨论】：