Question

我编写了一个名为my-component的组件，并在其中添加了一些ng-template，并使用#命名每个组件：

<my-component>
    <ng-template #one>
        1st format
    </ng-template>
    <ng-template  #two>
        2nd template
    </ng-template>
    <ng-template  #three>
        3rd template
    </ng-template>
</my-component>

在MyComponent的声明中，我使用@ContentChildren(TemplateRef)来访问这三个模板。

现在，我需要以one

内的某种方式访问这些模板的名称（two，three，MyComponent）

以下是代码：sample code

Answer 1

我创建了一个使用 ng-templates 的组件，但我很难找到有关它的文档。经过反复试验，我弄清楚了如何使用 @ContentChild

  @ContentChild('one') oneTemplate: TemplateRef<any>;
  @ContentChild('two') twoTemplate: TemplateRef<any>;

，然后在my-component的UI html模板中，按如下方式使用它们：

<ng-container *ngTemplateOutlet="oneTemplate"></ng-container>
<ng-container *ngTemplateOutlet="twoTemplate"></ng-container>

组件用法就像您描述的那样：

<my-component>
    <ng-template #one>
        1st format
    </ng-template>
    <ng-template  #two>
        2nd template
    </ng-template>
</my-component>

希望这对某人有帮助并起作用。反馈表示赞赏。

使用@ContentChildren（）访问每个ng-template名称

1 个答案: