使用 @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)访问过这三个模板。

现在我需要以某种方式在内部访问这些模板的名称（one、、），但我不知道如何。这是代码：示例代码twothreeMyComponent

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>

希望这对某人有帮助和有用。感谢反馈。