问题描述
限时送ChatGPT账号..我在 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屋!
更多推荐
[db:关键词]
发布评论