如何处理两个组件使用相同选择器的以下情况？ (删除“组件”一词以避免混乱)：
app.ts
import { Component } from '@angular/core';
import { Person as Person1 } from './person1';
import { Person as Person2 } from './person2';
@Component({
selector: 'app',template: '<person1???></person1><person2???></person2>',directives: [Person1,Person2]
})
export class App {
}
person1.ts
import { Component } from '@angular/core';
@Component({
selector: 'person',template: '<h1>Person 1</h1>'
})
export class Person {
}
person2.ts
import { Component } from '@angular/core';
@Component({
selector: 'person',template: '<h1>Person 2</h1>'
})
export class Person {
}
这不是React的问题,因为你只使用< Person1 />和< Person2 />
解决方法
基于GünterZöchbauer评论,你可以添加一堆样板来完成这个并包装组件：
app.ts
import { Component } from '@angular/core';
import { Person as Person1 } from './person1';
import { Person as Person2 } from './person2';
@Component({
selector: 'person1',template: '<person></person>',directives: [Person1]
})
export class Person1Wrapper {
}
@Component({
selector: 'person2',directives: [Person2]
})
export class Person2Wrapper {
}
@Component({
selector: 'app',template: '<person1></person1><person2></person2>',directives: [Person1Wrapper,Person2Wrapper]
})
export class App {
}
