重复使用ng-content [英] Repeating use of ng-content

问题描述

我有一个角2分量(我的面板)，它将使用ng-content显示提供的内容.我还想以扩展模式显示相同的内容，但是看来我只能在模板中引用一次ng-content.

I have an angular 2 component (my-panel) that will display the supplied content using ng-content. I also want to display that same content in an expanded modal, however it appears that I can only reference ng-content once in the template.

是否可以在模板中多次引用面板内容，从而避免多次传递相同的内容，而不必使用带有ng-content的选择器专门引用每个面板内容?

Is it possible to reference the panel content more than once in the template, thus avoiding the need to pass the same content more than once and needing to specifically reference each using selectors with 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>

推荐答案

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

There should be only one <ng-content> without a select="selector" attribute. All content that doesn't match the selector of other <ng-content> elements will be transcluded to the first <ng-content> element without a select attribute.

您可以使用

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

柱塞示例

更新

以上语法似乎在Angular2 final中中断.

Above syntax seems to break in Angular2 final.

改为使用

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

这也可能有效(未尝试)

This might also work (not tried)

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

这篇关于重复使用ng-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！