同じセレクタを使用する角度2の複数のコンポーネント

Question

2つのコンポーネントが同じセレクタを使用する次のような状況をどう対処しますか？

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 { 

} 

これではありません：（混乱を避けるために、単語 "コンポーネント" を削除）あなたがちょうど<Person1 />と<Person2 />

を使用しているので、リアクションの問題ギュンターZöchbauerに基づいて

Answer 1

は、あなたがこれを実現し、コンポーネントをラップする定型の束を追加することができますコメント

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 { 

}