在Angular 2中構造子組件

我正在嘗試在具有基本窗體的Angular 2（RC1）中構建應用程序，該窗體使用戶可以更改某些值。它由2個組件組成，UserListComponent和UserDetailComponent。在Angular 2中構造子組件

如果顯示UserDetailComponent（因爲模板中有my * ngIf =「selected_user」標籤），所以應用程序顯示一個列表（該功能在UserListComponent中實現），其中所有用戶都可點擊。

但問題如下：UserDetailForm是在構建UserDetailComponent的過程中構建的，但是，最初沒有選擇用戶，因此我的代碼被中斷。這是我的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] 
     }); 
    }

是否有可能只建造這個組件，如果選定的用戶分配，同時也保持它UserDetailList的子組件？

編輯：的要求我（簡化）父組件：

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

來源

2016-05-12 hY8vVpf3tyR57Xib

能否請你加入父母的代碼以及如何創建此組件？ –

請同時添加'user-list.html'的部分，其中''創建。 –

你可以在ngOnInit鉤子方法定義表單：

constructor(form: FormBuilder) { 
} 

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

輸入屬性只有在第一次之後ngOnChanges方法的電話正好在ngOnInit的呼叫之前。

然後，您可以用這種方式：

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

來源

2016-05-12 10:27:20

如果你的代碼移到ngOnChanges()將（重新）創建表單時，值設爲：

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

來源

2016-05-12 10:28:57

在Angular 2中構造子組件

回答

相關問題