在 Angular 2 中构建子组件

Question

我正在尝试在 Angular 2 (RC1) 中构建一个应用程序，它具有允许用户更改某些值的基本形式。它由 2 个组件组成，UserListComponent 和 UserDetailComponent。

该应用程序显示一个列表（该功能在 UserListComponent 中实现），其中所有用户都可以单击，如果选择了用户，则会显示 UserDetailComponent（因为模板中的 *ngIf="selected_user" 标记） .

然而，问题如下：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();
    }
}

Answer 1

您可以在 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>

Answer 2

如果您将代码移至 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]
    });
}

在 Angular 2 中构建子组件

Constructing child Component in Angular 2

angular2-forms

angular