Angular Component Constructor zweimal aufgerufen

Question

Ich bin neu in Angular und bin in einem Problem mit dem Konstruktor auf eine untergeordnete Komponente, die zweimal aufgerufen wird, und das zweite Mal, es heißt, es löscht die Eigenschaften, die zum ersten Mal festgelegt.

Dies ist die übergeordnete Komponente:

@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); 
    } 
} 

Und in der Vorlage wird die untergeordnete Komponente verwiesen:

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

Dies ist die untergeordnete Komponente:

@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!"); 
     } 
    } 
} 

Und schließlich die Kindkomponente Vorlage:

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

Der untergeordnete Komponentenkonstruktor wird zweimal aufgerufen, und beim zweiten Mal, wenn er als "parentItemId" bezeichnet wird, wird er auf null gesetzt und die items -Eigenschaft wird gelöscht. Wenn ich die parentId fest codiere, anstatt die Eingabe zu verwenden, werden die Daten ordnungsgemäß empfangen und in der Vorlage angezeigt, aber unter Verwendung des Eingabewerts zeigt die Vorlage keine Ergebnisse.

Ich habe eine Plunker geschaffen, die hier das gleiche Verhalten zeigt: http://embed.plnkr.co/xaJtfNgbWCUPap2RCJUA/

Answer 1

Ihr Problem ist, dass in der app.module Sie beide Eltern und Kind Komponente Bootstrap:

bootstrap: [ ParentItemComponent, ChildItemsComponent ] 

Es hat

sein

bootstrap: [ ParentItemComponent]