Übergabe des Objekts vom Server von der übergeordneten Komponente an die untergeordnete Komponente angular2

Question

Ich habe zwei Komponenten 'ItemComponent' und 'ItemForm', und ich muss ein Objekt von einem 'ItemForm' aus einem http-Aufruf von ItemComponent abgerufen.

Die ItemComponent

@Component({ 
    selector: 'item', 
    templateUrl: 'templates/item.html', 
    directives: [ItemForm] 
}) 

export class ItemComponent implements OnInit { 

    private routeParams: RouteParams; 

    item: Item; 

    title: String; 

    constructor(
     private _service: ItemService, 
     routeParams: RouteParams) { 
     this.routeParams = routeParams; 
    } 

    fetch() { 
     this._service.get(this.routeParams.get('id')).subscribe(item => { 
       this.item = item 
      }, 
      error => { 
      console.log(error); 
     }); 
    } 

    ngOnInit() { 

     if(this.routeParams.get('id')) { 
      this.title = "Update Item"; 
      this.fetch(); 
     } 
     else { 
      this.title = "Add Item" 
     } 
    } 
} 

und die ItemForm

@Component({ 
     selector: 'item-form', 
     templateUrl: `<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)"> 
<input type="text [(ngModel)]="item.title"> 
</form>` 
    }) 

    export class ItemFormComponent implements OnInit { 
     @Input() item: Item; 

     private mode: String; 
     private service: ItemService; 

     constructor(service: ItemService, routeParams: RouteParams) { 
      this.service = service; 
      this.routeParams = routeParams; 

      if(this.routeParams.get('id')) { 
       this.mode = "edit"; 
      } 
      else { 
       this.mode = "create"; 
      } 
     } 

     onSubmit($form) { 
      console.info("Mode", this.mode); 

      if ($form.form.valid) { 
      } 
     } 

     ngOnInit() { 
      console.log(this.item); 
     } 
    } 

Die Objektposition in der ItemFormComponent nicht definiert ist, obwohl es an der Komponente vorbei

<item-form [item]='item'></item-form> 

Ich weiß etwas tue falsch, ich weiß nicht was.

Answer 1

Sie starten in ngOnInit() der ItemComponent holen und prüfen Sie in ngOnInit() des ItemFormComponent. Es gibt keine Garantie (eigentlich ist es ziemlich unwahrscheinlich, dass die Antwort vom Server bereits zurückgegeben, wenn ngOnInit() ausgeführt wird.

Sie OnChanges in ItemFormComponent implementieren können, um benachrichtigt, wenn der Wert ankommt.

@Component({ 
    selector: 'item-form', 
    template: `<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)"> 
     <input type="text [(ngModel)]="item.title"> 
     </form>` 
}) 
export class ItemFormComponent implements OnInit { 
    @Input() item: Item; 

    private mode: String; 
    private service: ItemService; 

    constructor(service: ItemService, routeParams: RouteParams) { 
     this.service = service; 
     this.routeParams = routeParams; 

     if(this.routeParams.get('id')) { 
      this.mode = "edit"; 
     } 
     else { 
      this.mode = "create"; 
     } 
    } 

    onSubmit($form) { 
     console.info("Mode", this.mode); 

     if ($form.form.valid) { 
     } 
    } 

    ngOnInit() { 
     console.log(this.item); 
    } 

    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
     if(changes['item'].currentValue) { 
      console.log('ngOnChanges - changes = ' + changes['item'].currentValue); 
    } 
}