Angular2は、私はまた、コンポーネントである項目が含まれて簡単なリストUIコンポーネントを、構築Subchild

Question

で

をディレクティブを渡します。リスト項目の2種類例えば

：

@Component({ 
    selector: 'list-item', 
    template: 'This is a PRODUCT!' 
}) 
export class ProductListItemComponent { } 

@Component({ 
    selector: 'list-item', 
    template: 'This is a PERSON!' 
}) 
export class PersonListItemComponent { } 

だから、私は私のアプリのコンポーネントの初期化：

import {ListComponent} from '...'; 
import {ProductListItemComponent} from '...'; 

@Component({ 
    selector: 'list-item', 
    template: ` 
    <list></list> 
    `, 
    directives: [ 
    ListComponent, 
    ProductListItemComponent 
    ] 
}) 
export class AppComponent { } 

を

私のListComponentはappコンポーネントからアイテムコンポーネント（ディレクティブ）を受け取らないので、（もちろん）動作しません。

@Component({ 
    selector: 'item', 
    template: ` 
    <ul><li *ngFor=...> 
     <list-item></list-item> 
    </li></ul> 
    ` 
}) 
export class ListComponent { } 

私はそれを動作させるか、何をすべきでしょうか？ ありがとうございます！

Answer 1

を追加する必要があり、ここで私がAngular 2 dynamic tabs with user-click chosen componentsに基づいてビルド最終版は、である（あなたのギュンターをありがとう！）

解決策は、さまざまなタイプのリストアイテムとリストアイテムの中間として動的コンポーネントを使用することです。

import { 
    Component, 
    ComponentFactory, 
    ComponentRef, 
    Input, 
    ViewContainerRef, 
    ComponentResolver, 
    ViewChild} from '@angular/core'; 

@Component({ 
    selector: 'dynamic-list-item', 
    template: `<div #target></div>` 
}) 
export class DynamicListItem { 

    @ViewChild('target', {read: ViewContainerRef}) target; 
    @Input() Type: any; 
    @Input() Item: any; 
    cmpRef: ComponentRef<any>; 
    private isViewInitialized: boolean = false; 

    constructor(private resolver: ComponentResolver) { } 

    updateComponent() { 
    if(!this.isViewInitialized) return; 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    } 
    this.resolver.resolveComponent(this.Type).then((factory:ComponentFactory<any>) => { 
     this.cmpRef = this.target.createComponent(factory); 
     this.cmpRef.instance.Item = this.Item; 
    }); 
    } 

    ngOnChanges() { 
    this.updateComponent(); 
    } 

    ngAfterViewInit() { 
    this.isViewInitialized = true; 
    this.updateComponent(); 
    } 

    ngOnDestroy() { 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    }  
    } 

} 

Plunker example RC4

Answer 2

まずは、実際のコードやコピー貼り付けはどうですか？あなたのコンポーネントのほとんどすべてが同じセレクタのリスト項目を持っていることが分かります。間違っています。それはuniqでなければなりません。

第2の問題については、それ自体で問題が発生しました。リスト内でレンダリングしたい場合は、ListComponentにProductListItemComponentとPersonListItemComponentを追加してください。このように：

import {PersonListItemComponent} from '...'; 
import {ProductListItemComponent} from '...'; 

@Component({ 
selector: 'list', 
template: ` 
    <ul><li *ngFor=...> 
    <list-item></list-item> 
    </li></ul> 
`, 
directives: [ 
    PersonListItemComponent, 
    ProductListItemComponent 
] 
}) 
export class ListComponent { ...} 

とごAppComponentのためにあなたがそう「ディレクティブ」小道具のためにのみListComponent