web-dev-qa-db-ja.com

Angular 2回呼び出されたコンポーネントコンストラクター

私はAngularに不慣れで、子コンポーネントのコンストラクターが2回呼び出され、2回目に呼び出されると、最初に設定されたプロパティがクリアされるという問題が発生しています。

これは親コンポーネントです：

@Component({
    selector: 'parent-item',
    templateUrl: '...',
    providers: [ItemService]
})
export class ParentItemComponent {
    public parentItemId;
    public model: ParentItem;

    constructor(itemService: ItemService, Elm: ElementRef) {
        this.parentItemId = Elm.nativeElement.getAttribute('parentItemId'); 
        itemService.getParentItem(this.parentItemId).subscribe(data => this.model = data);
    }
}

そして、テンプレートでは、子コンポーネントが参照されます。

<child-items [parentItemId]="parentItemId">Loading...</<child-items>

これは子コンポーネントです：

@Component({
    selector: 'child-items',
    templateUrl: '...',
    providers: [ItemService]
})
export class ChildItemsComponent {
    @Input() public parentItemId: number;
    public items: Observable<ChildItem[]>;

    constructor(private itemService: ItemService) {
        console.log("constructor");
    }

    ngOnInit() {
        if (this.parentItemId) {
            this.items = this.itemService.getChildItems(this.parentItemId);
        }  
        else {
            console.log("Parent Id not set!");
        }
    }
}

そして最後に、子コンポーネントテンプレート：

<tr *ngFor="let item of items | async">
    <td>...</td>
</tr>

子コンポーネントコンストラクターは2回呼び出され、2回目に呼び出されると、parentItemIdがnullに設定され、itemsプロパティがクリアされます。入力を使用する代わりにparentIdをハードコーディングすると、データは正しく受信され、テンプレートに表示されますが、入力値を使用すると、テンプレートに結果が表示されません。

ここで同じ動作を示すプランカーを作成しました： http://embed.plnkr.co/xaJtfNgbWCUPap2RCJUA/

javascriptangularhtmltypescriptangular-components
10
rwdial

あなたの問題は、app.moduleであなたがbootstrap親と子の両方のコンポーネント：

bootstrap:    [ ParentItemComponent, ChildItemsComponent ]

それはする必要があります

  bootstrap:    [ ParentItemComponent]
9
Yakov Fain

child-itemsが正しく閉じられていません。おそらく このエラー

この

<child-items [parentItemId]="parentItemId">Loading...</<child-items>

する必要があります：

<child-items [parentItemId]="parentItemId">Loading...</child-items>
2
xameeramir