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>显式获取模板，也可以使用结构指令（使用*前缀）隐式获取模板。在你的问题的代码中似乎都不是这种情况。

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

1 个答案: