这个问题通常发生在开发者试图在两个父组件中重复使用同一个子组件时。在 Angular 中,每个组件都必须具有唯一的选择器和上下文。
为了解决这个问题,我们可以对每个父组件分别创建一个子组件实例,每个实例都有自己独特的上下文和选择器。
在模板中,我们可以在两个父组件中分别使用两个子组件。
示例代码:
my-parent-component1.html
my-parent-component2.html
my-parent-component1.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-parent-component1',
templateUrl: './my-parent-component1.html'
})
export class MyParentComponent1 { }
my-parent-component2.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-parent-component2',
templateUrl: './my-parent-component2.html'
})
export class MyParentComponent2 { }
my-child-component1.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-child-component1',
templateUrl: './my-child-component1.html'
})
export class MyChildComponent1 { }
my-child-component2.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-child-component2',
templateUrl: './my-child-component2.html'
})
export class MyChildComponent2 { }
上一篇:Angular子组件不检测更改。