首页 > 解决方案 > 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>

标签: angularcomponentsangular-componentsangular10

解决方案


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

这可能会对您有所帮助。Angular 2 - 将组件限制为特定的父组件


推荐阅读