具有相同選擇器的角度2多個組件

Question

如何處理以下情況，其中兩個組件使用相同的選擇器？ （刪除單詞 「組件」，以避免混亂）：

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 />

Answer 1

基於岡特Zö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', 
    template: '<person></person>', 
    directives: [Person2] 
}) 
export class Person2Wrapper { 

} 

@Component({ 
    selector: 'app', 
    template: '<person1></person1><person2></person2>', 
    directives: [Person1Wrapper, Person2Wrapper] 
}) 
export class App { 

}