首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Angular2 Dart中显示嵌套的子组件

在Angular2 Dart中显示嵌套的子组件
EN

Stack Overflow用户
提问于 2017-05-16 19:19:22
回答 1查看 418关注 0票数 1

我试图在Angular2 Dart中完成以下工作:

代码语言:javascript
复制
    <div class='test'>
        <accordion2>
            <accordion-item-2 title="blah" active="true">
                <sample-form-1></sample-form-1>
            </accordion-item-2>
            <accordion-item-2>
                <sample-form-2></sample-form-2>
            </accordion-item-2>
            <accordion-item-2>
                <sample-form-3></sample-form-3>
            </accordion-item-2>
        </accordion2>
    </div>

我以前使用过一个指令将sample-form-x转换为accordion-item,我试图在不使用指令的情况下完成以下工作。

我的accordion-item-2只是一个包装类,可以将内容保存在:

代码语言:javascript
复制
@Component(selector: 'accordion-item-2')
class AccordionItem2 {

    @ContentChild(TemplateRef) TemplateRef template;

    @ContentChildren(ContentChildren)
    QueryList<ContentChildren> children;

    @Input("active") bool active = true;
    @Input("title") String title = "No Title";

}

在显示它时,除了示例表单外,所有呈现的内容都是:

代码语言:javascript
复制
@Component(
    selector: 'accordion2',
    // language=HTML
    template: """
        <ul class="accordion" 
            [attr.id]="id"
            [attr.data-accordion]="true" 
            [attr.slide-speed]="slideSpeed"
            [attr.multi-expand]="multiExpand"
            [attr.allow-all-closed]="allowAllClosed">
            <template ngFor let-item [ngForOf]="items">
                <li class="accordion-item" [ngClass.is-active="item.active"] data-accordion-item>           
                    <a href="#" class="accordion-title">{{item.title}}</a>
                    <div class="accordion-content" data-tab-content>
                        <template ngFor let-child [ngForOf]="item.children">
                            <template [ngTemplateOutlet]="child"></template>
                        </template>
                    </div>
                </li>   
            </template>
        </ul>
    """,
    directives: const [
        AccordionItem2, NgTemplateOutlet
    ]
)
class Accordion2 implements AfterContentInit, OnDestroy {

    @ContentChildren(AccordionItem2) QueryList<AccordionItem2> items;
    @Input() int slideSpeed = 100;
    @Input() bool multiExpand = true;
    @Input() bool allowAllClosed = true;

    String id = IdProvider.generateId(prefix: "accordion");

}

我也试过:

代码语言:javascript
复制
<div class="accordion-content" data-tab-content>
    <template [ngTemplateOutlet]="item.template"></template>
    </template>
</div>

但没有成功。

在没有指令的情况下能做到这一点吗?

EN

Stack Overflow用户

回答已采纳

发布于 2017-05-16 20:07:33

更新角5

ngOutletContext被重命名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原始

child in

代码语言:javascript
复制
<template [ngTemplateOutlet]="child">

不是TemplateRef,因此ngTemplateOutlet没有什么可呈现的

您可以通过使用<template>或隐式结构指令(带有*前缀)显式地获得模板。在你问题中的代码中,两者似乎都不是这样的。

票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44009863

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档