2017-09-14 7 views
0

主成分:角4:同じセレクタを持つ複数のコンポーネントがある場合、ある条件に基づいて1つのコンポーネントのみを読み込む方法は?

@Component({ 
    selector: 'app-root', 
    template: '<app-report></app-report>' 
}) 

成分1:

@Component({ 
    selector: 'app-report', 
    templateUrl: './trip.report.html' 
}) 

COMPONENT2:

@Component({ 
    selector: 'app-report', 
    templateUrl: './user.report.html' 
}) 

成分何らかの条件(成分1をもとにして、それを通して角度4のいずれかの方法があり、または2)何らかの条件に基づいて「主要コンポーネント」にロードされますか?

+2

を使用することができます –

答えて

3

これを行う方法はありません。セレクタは、NgModule内で宣言され、1つのNgModuleにインポートされたすべてのコンポーネントとディレクティブに対して一意である必要があります。

コードを所有している場合は、競合するセレクタを作成しないでください。

インポートサードパーティのモジュールが競合セレクタで要素を持っている場合は、
あなたは競合しないセレクターで別のコンポーネントに相反する要素をラップし、それ自身のモジュールに追加することができます。 次に、どのコンポーネントを使用するかを@NgModule({imports: [...]})で指定できます。

次に、あなただけの私が、なぜあなただ​​けのテンプレート名を見て、彼らは完全に異なる要素に関連していることを考えると、彼らに同じ名前を付けるだろう、この特定の場合には不思議*ngIf

<conflicting-component *ngIf="foo"></conflicting-component> 
<de-conflicted-wrapper *ngIf="!foo"></de-conflicted-wrapper> 
関連する問題