Question

我有一个角度2组件（我的面板），它将使用ng-content显示提供的内容。我还想在扩展模式中显示相同的内容，但似乎我只能在模板中引用一次ng-content。

是否可以在模板中多次引用面板内容，从而避免需要多次传递相同的内容，并且需要使用具有ng-content的选择器专门引用每个内容？

提前致谢。

我的面板模板：

<div class="panel panel-default">
    <!-- non-expanded panel -->
    <div class="panel-body">
        <ng-content></ng-content>
    </div>

    <button data-toggle="modal" data-target="#myModal">Expand</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body">
                    <ng-content></ng-content>  <-- content not displayed
                </div>
            </div>
        </div>
    </div>
</div>

所需的我的面板用法：

<my-panel>
 <p>my panel content</p>
</my-panel>

Answer 1

只有一个<ng-content>没有select="selector"属性。所有与其他<ng-content>元素的选择器不匹配的内容都将被转换为第一个<ng-content>元素，而不会包含select属性。

您可以使用的是

<击>

<div *ngFor="let x of y" *ngForTemplate="someTemplateRef"

<击>

Plunker example

<强>更新

上面的语法似乎在Angular2 final中断了。

改为使用

<template ngFor let-x [ngForOf]="y" [ngForTemplate]="someTemplateRef">
  <div *ngFor="let x of y" *ngForTemplate="someTemplateRef">
</template>

这可能也有效（未尝试）

<div *ngFor="let x of y template:someTemplateRef"

重复使用ng-content

1 个答案: