时间戳

首页 > 解决方案 > 如何在 Angular 中创建构建内部 html 组件的组件

angular - 如何在 Angular 中创建构建内部 html 组件的组件

问题描述

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

<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') 由 mat-tab-group 组件控制。我该怎么做呢？我对角度很陌生，所以我真的不知道解释这一点的正确术语。

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

<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>

module-interface 组件将处理这些 module-interface-tab 组件在父视图中的呈现方式

标签： angularangular-material

解决方案

这称为内容投影。您的父组件将外部内容 ( <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

更多阅读：https ://blog.angular-university.io/angular-ng-content/

推荐阅读