如何在 Angular 中创建构建内部 html 组件的组件答案

【问题标题】：How do I create components that build inner html components in Angular如何在 Angular 中创建构建内部 html 组件的组件
【发布时间】：2021-02-26 00:06:24
【问题描述】：

我正在尝试创建一个与材质选项卡具有相似用法的组件。我可以像这样创建带有材质标签的标签

<mat-tab-group mat-align-tabs="center">
    <mat-tab label="First Tab">
        <p>First tab works!</p>
    </mat-tab>
    <mat-tab label="Second Tab">
        <p>second tab works</p>
    </mat-tab>
</mat-tab-group>

但是，我正在尝试创建一个以类似方式工作的自定义组件，以便我有一个名为“foo”（mat tab 等效于“mat-tab-group”）的父容器，它可以有子组件（mat tab由 mat-tab-group 组件控制的等效“mat-tab”）。我该怎么做呢？我对 Angular 很陌生，所以我真的不知道正确的术语来解释这一点。

为了进一步解释，我这样创建我的组件：

<module-interface moduleName="PCDR"
                  moduleURL="pcdr/"
                  subModuleName="Positions"
                  subModuleURL="pcdr/positions">

    <p>test</p>
</module-interface>

模块接口将呈现它的 HTML，而不是 p 元素。理想情况下，我想要这样的用法

<module-interface moduleName="Foo"
                  moduleURL="Foo/"
                  subModuleName="Bar"
                  subModuleURL="Foo/Bar">

    <module-interface-tab>
        <p>test1</p>
    </module-interface-tab>
    <module-interface-tab>
        <p>test2</p>
    </module-interface-tab>

</module-interface>

模块接口组件将处理这些模块接口选项卡组件在父视图中的呈现方式

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这叫做内容投影。您的父组件将外部内容 (<p>test1</p> or <p>tets2</p>) 投射到您的子组件。您所需要的只是子组件中的<ng-content>，您可以认为它就像子模板中的标记。您在<module-interface-tab>...</module-interface-tab> 中定义的每个外部内容都将被替换到该位置。

演示：https://stackblitz.com/edit/ng-content-projection-8ktwwk?file=app%2Fapp.component.html

【讨论】：