Angular Component構造函數調用兩次

Question

我是Angular的新手，並且遇到了一個構造函數對被調用兩次的子組件的問題，並且第二次調用它是第一次清除屬性集。

這是父組件：

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

子組件的構造函數被調用兩次，第二次調用parentItemId設置爲null，並且items屬性被清除。如果我對parentId進行了硬編碼，而不是使用輸入，則數據正在正確接收並顯示在模板中，但使用輸入值模板不會顯示結果。

我創建了一個plunker其在這裏顯示了相同的行爲：http://embed.plnkr.co/xaJtfNgbWCUPap2RCJUA/

Answer 1

你的問題是，在app.module你既引導父母和孩子組成：

bootstrap: [ ParentItemComponent, ChildItemsComponent ] 

它必須是

bootstrap: [ ParentItemComponent]