使用 @ContentChildren() 访问每个 ng-template 名称

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)来访问这三个模板。

现在我需要以某种方式在 MyComponent 中访问这些模板的名称（one、two、three），但我不知道如何访问。这是代码：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 名称

Accessing each ng-template name using @ContentChildren()

angular-directive

ng-template

angular

angular6