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

Posted 2023-02-22

【中文标题】使用 @ContentChildren() 访问每个 ng-template 名称

【英文标题】：Accessing each ng-template name using @ContentChildren()

【发布时间】：2018-11-18 08:50:09

【问题描述】：

我写了一个名为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

【问题讨论】：

jsfiddle.net/0pd4g5va

你可以简单地使用ngAfterContentInit钩子来获取所有的模板

@yurzui 你能解释一下吗？如果可能的话，也可以在 ngAfterContentInit 的帮助下进行解释

@yurzui 你是我的英雄 :)

jsfiddle.net/tvm9gjuc

【参考方案1】：

我创建了一个使用 ng-templates 的组件，但我很难找到有关它的文档。一些试验和错误，我想出了如何使用 @ContentChild

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

然后在我的组件的 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>

希望这对某人有所帮助和工作。感谢您的反馈。

【讨论】：

有没有办法处理并传递具有正确类型完成的上下文？