Блог

Я пытаюсь создать компонент, который имеет аналогичное использование в качестве вкладок материалов. Я могу создавать вкладки с вкладками материалов следующим образом

 <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. Как бы я мог сделать что-то подобное? Я очень новичок в 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>
  

И компонент module-interface будет обрабатывать, как эти компоненты module-interface-tab отображаются в родительском представлении

Это называется проекцией содержимого. Ваш родительский компонент проецирует внешний контент ( <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/app.component.html

Подробнее для чтения: https://blog.angular-university.io/angular-ng-content /