angular - 在Angular2 Dart中显示嵌套的子级子组件

Question

我正在尝试在Angular2 Dart中进行以下工作:

    <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只是一个包装类，用于保留内容:

@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";

}

在显示它时，所有内容都会呈现，但样本形式除外:

@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");

}

我也尝试过:

<div class="accordion-content" data-tab-content>
    <template [ngTemplateOutlet]="item.template"></template>
    </template>
</div>

但是没有成功。

没有指令就可以做到吗？

Answer 1

更新Angular 5
ngOutletContext重命名为ngTemplateOutletContext
另请参阅https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原始
child在

<template [ngTemplateOutlet]="child">

不是TemplateRef，因此没有要呈现的ngTemplateOutlet
您可以通过使用<template>显式获取模板，或者通过结构性指令(带有*前缀)隐式获取模板。
您的问题代码中似乎都不是这样。