Angular 10子组件只能在父组件中使用

问题描述

我需要在组件上配置为仅在另一个组件内使用。 我该怎么办？

组件：

@Component({
    selector: 'app-menu[id]',templateUrl: './menu.component.html',styleUrls: ['./menu.component.scss']
})
export class MenuComponent {
    ...
}

@Component({
    selector: 'app-sub-menu[id]',templateUrl: './sub-menu.component.html',styleUrls: ['./sub-menu.component.scss']
})
export class SubMenuComponent {
    ...
}

HTML

正确的使用方式只能是这样：

<app-menu>
    <app-sub-menu></app-sub-menu>
</app-menu>

我需要阻止这种使用：

<div>
    <app-sub-menu></app-sub-menu>
</div>

解决方法

在子组件的构造函数中注入父组件。并在html文件中使用父组件选择器中的子组件选择器。

这可能会对您有所帮助。 Angular 2 - Restrict Component to specific parent Component。