Konstruieren untergeordnete Komponente in Angular 2

Question

Ich versuche, eine Anwendung in Angular 2 (RC1) zu erstellen, die eine grundlegende Form hat, die es dem Benutzer ermöglicht, einige Werte zu ändern. Es besteht aus 2 Komponenten, UserListComponent und UserDetailComponent.

Die Anwendung zeigt eine Liste (diese Funktionalität ist in UserListComponent implementiert), wo alle Benutzer anklickbar sind, wenn ein Benutzer ausgewählt ist, wird die UserDetailComponent angezeigt (wegen meines * ngIf = "selected_user" -Tags in der Vorlage).

Das Problem ist jedoch das Folgende: Die UserDetailForm wird während der Konstruktion meiner UserDetailComponent erstellt, jedoch wird zunächst ein Benutzer nicht ausgewählt und daher bricht mein Code. Das ist meine UserDetailComponent.

import { Component, Input } from '@angular/core'; 
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from '@angular/common'; 

import { User } from '../classes/user'; 

@Component({ 
    selector: 'user-detail', 
    directives: [FORM_DIRECTIVES], 
    templateUrl: 'partials/user-detail.html', 
}) 

export class UserDetailComponent { 
    userDetailForm: ControlGroup 
    @Input() 
    user: User; 

    constructor(form: FormBuilder) { 
     this.userDetailForm = form.group({ 
      'first_name': [this.user.first_name], 
      'last_name': [this.user.last_name], 
      'email': [this.user.email] 
     }); 
    } 

Gibt es eine Möglichkeit, diese Komponente nur zu konstruieren, wenn der eine ausgewählte Benutzer zugeordnet ist, sondern auch ein Kind Bestandteil UserDetailList zu halten?

Edit: als meine (vereinfachte) Stammkomponente angefordert:

import {Component, OnInit} from '@angular/core'; 

import { User } from '../classes/user'; 
import { UserService } from '../services/user.service'; 
import { UserDetailComponent } from './user-detail.component'; 

@Component({ 
    templateUrl: 'partials/user-list.html', 
    directives: [ UserDetailComponent ] 
}) 

export class UserListComponent { 
    selectedUser: User; 
    users: User[]; 
    number_of_pages: number; 
    currentPage: number; 
    number_of_users: number; 

    constructor(private _userService: UserService) { 
     this.currentPage = 1; 
     this.number_of_pages = 0; 
     this.number_of_users = 0; 
    } 

    getUsers() { 
     this._plugifyService.getUsers().subscribe(data => { 
      this.users = data.users, 
      this.number_of_pages = data.number_of_pages, 
      this.number_of_users = data.number_of_users 
     }); 
    } 

    onSelect(user: User) { 
     this.selectedUser = user; 
    } 

    ngOnInit() { 
     this.getUsers(); 
    } 
} 

Answer 1

Sie Ihr Formular in der ngOnInit Hook-Methode definieren könnte:

constructor(form: FormBuilder) { 
} 

ngOnInit() { 
    this.userDetailForm = form.group({ 
     'first_name': [this.user.first_name], 
     'last_name': [this.user.last_name], 
     'email': [this.user.email] 
    }); 
} 

Eingang Eigenschaften nach dem ersten nur verfügbar sind, Anruf der ngOnChanges Methode direkt vor dem Anruf der ngOnInit eins.

Sie dann auf diese Weise verwenden können:

<user-detail *ngIf="selected_user" [user]="selected_user"></user-detail> 

Answer 2

Wenn Sie den Code zu ngOnChanges() verschieben, wird er (wieder) das Formular erstellen, wenn der Wert festgelegt ist:

constructor(private form: FormBuilder) {} 

ngOnChanges() { 
    this.userDetailForm = form.group({ 
     'first_name': [this.user.first_name], 
     'last_name': [this.user.last_name], 
     'email': [this.user.email] 
    }); 
}