Угловой конструктор компонентов, вызываемый дважды

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]