重复使用 ng-content

Question

我有一个 angular 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> 元素的选择器不匹配的内容都将被嵌入到第一个没有select 属性的<ng-content> 元素中。

你可以改用的是

罢工>

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