Angular Создание компонента, который зависит от другого компонента более высокого уровня

Question

Я хотел бы создать angular компонент, который не может быть визуализирован, если не обернут в другие компоненты более высокого уровня. Чтобы лучше это понять, вот пример (пример взят из angular material структуры вкладок):

<mat-tab-group>
    <mat-tab></mat-tab>
</mat-tab-group>

Я хочу создать такую ​​же структуру, где mat-tab будет моим компонентом, который не может быть визуализирован без mat-tab-group упаковочный компонент.

Я просматриваю документацию angular, но не могу найти относительную информацию. Может ли кто-нибудь помочь, пожалуйста?

Спасибо!

Answer 1

Благодаря @Syed именно то, что я искал.

Angular 2 - ограничить компонент указанием c родительский компонент

Спасибо!

Answer 2

вы можете использовать Optional и Host, чтобы получить "mat-tab-group"

У вашего ребенка

get hasParent()
{
    return this.hello!=null
}
constructor(@Optional() @Host() private hello:HelloComponent){}

Вы можете использовать в child.component.ts

<ng-container *ngIf="hasParent">
....
</ng-container>

Если вы публикуете c привет, вы можете использовать в. html (*) как

<h1 *ngIf="hasParent">Hello!, parent's name is {{hello.name}}</h1>

(*) Если вы приватны, вы можете получить доступ ко всем публикациям c свойства ребенка, используя this.hello.oneProperty или this.hello.oneFunction() См. simple stackblitz