AngularDart:如何在自定义组件模板中包含子组件 [英] AngularDart: How to include subcomponents in a custom component template

问题描述

我在 AngularDart 中创建了一个 tabs 组件

@Component(可见性:Directive.CHILDREN_VISIBILITY，选择器:rtabs"，templateUrl: "packages/myapp/components/rtabs.html",发布为:cmp"，useShadowDom: 假)类 RTabsComponent {@NgAttr('标签')字符串标签；int selectedTabIndex = 0;RTabsComponent(){}var tabs = new List();添加(RTabComponent 选项卡){tabs.add(tab);}}@成分(选择器:rtab"，模板:<内容></内容>"，发布为:cmp"，useShadowDom: 假)类 RTabComponent {@NgAttr('名字')字符串名称；RTabComponent(RTabsComponent tabs){tabs.add(this);}}

我对组件的使用就像

<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 内容时遇到问题.我不确定正确的语法是什么.

如果我这样做

{{标签}}

它只是打印出Instance of 'RTabComponent'"，这是可以理解的.

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

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

解决方案

回答我自己的问题.

将模板添加到 rtab 就像

<内容></内容>

并在 rtabs.html 中

<内容></内容>

I've created a tabs component in 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);
    }
}

and my use of the component is like

<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>

I'm having a problem with rending the content of the rtab in the rtabs component template. I'm not sure what the correct syntax is for this.

If I do

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

It just prints out "Instance of 'RTabComponent'", which is understandable.

But how would I loop through the cmp.tabs in the template and render the actual content of the rtab?

I need the content to be work with the ng-model stuff and other components like the one in the 3rd tab.

解决方案

Answering my own question.

add a template to to rtab like

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

and in the rtabs.html

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

这篇关于AngularDart:如何在自定义组件模板中包含子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！