AngularDart:如何在自定义组件模板中包含子组件 [英] AngularDart: How to include subcomponents in a custom component template
本文介绍了AngularDart:如何在自定义组件模板中包含子组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在AngularDart中创建了一个tabs组件
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>
我在rtabs组件模板中渲染rtab的内容时遇到问题。我不知道这是什么正确的语法。
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.
如果我这样做
<div ng-repeat="tab in cmp.tabs">
{{tab}}
</div>
它只是打印出RTabComponent'的实例,这是可以理解的。
It just prints out "Instance of 'RTabComponent'", which is understandable.
但是我如何循环遍历模板中的cmp.tabs并渲染rtab的实际内容?
But how would I loop through the cmp.tabs in the template and render the actual content of the rtab?
我需要
推荐答案
回答自己的问题。
添加模板到rtab,如
add a template to to rtab like
<div ng-class="{'tab-pane': true, active: cmp.active}">
<content></content>
</div>
和rtabs.html
and in the rtabs.html
<div class="tab-content">
<content></content>
</div>
这篇关于AngularDart:如何在自定义组件模板中包含子组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文