在 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 只是一个包装器 class，用于将内容保存在：

@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

更新Angular5

ngOutletContext 已重命名为 ngTemplateOutletContext

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

原创

child 在

<template [ngTemplateOutlet]="child">

不是 TemplateRef，因此 ngTemplateOutlet

无需渲染

您可以通过使用 <template> 或通过结构指令（带有 * 前缀）隐式地获取模板。在您问题的代码中，两者似乎都不是这种情况。

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

Displaying nested children's child components in Angular2 Dart

dart

angular-dart

angular