Question

我试图创建一个可编辑的表单组件。我已经看了几个关于如何访问父数据的答案，但没有一个回答满足这些需求的问题：

同一页面上可能有多个表单组件，（这意味着我无法使用全局服务来控制它）
我不知道提前添加哪些表单组件。（这意味着我将无法将它们包含在父模板中）

假设我有一个界面：

export interface EditOptions
{
    isEditing: boolean;
}

现在假设我有一个带有按钮的组件，它可以控制编辑状态：

import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { EditOptions } from '../../../models/editOptions';

@Component({
  selector: 'editable-form',
  templateUrl: '<div><button (click)="toggleEdit()">Edit</button></div>'
})
export class EditableFormComponent {
    editOptions: EditOptions = { isEditing: false };
    isEditing: boolean = false;

    toggleEdit() {
        this.editOptions.isEditing = !this.editOptions.isEditing;
    }

    getEditOptions() {
        return this.editOptions;
    }
}

现在让我说我有一个儿童组件：

<div>
  <div [hidden]="!editOptions.isEditing">
    <input #inlineEditControl [required]="required" [name]="value" [(ngModel)]="value" [type]="type" [placeholder]="label" />
  </div>
  <div [hidden]="editOptions.isEditing">
    <label class="block bold">{{label}}</label>
    <div class="inline-edit">{{value}}&nbsp;</div>
  </div>
</div>

和打字稿文件，（为了简单起见，我已经省略了完整的代码）：

@Component({
  selector: 'inline-edit',
  templateUrl: 'inline-edit.html'
})
export class InlineEditComponent{
     @Input() editOptions: EditOptions;
     @Input() label: string;
     @Input() value: string;
}

现在我可以像这样构建一个页面：

<div>
    <editable-form #profileForm></editable-form>
    <inline-edit [(ngModel)]='user.username' [editOptions]='#profileForm.getEditOptions()'></inline-edit>
</div>

这有效，但我希望它可以工作，所以父控制一切都是我可以这样做的方式：

<div>
    <editable-form #profileForm><inline-edit [(ngModel)]='user.username'></inline-edit></editable-form>
</div>

然后让可编辑的表单组件有一些如何抓取所有视图子项并从列表中设置editOptions？

Angular 2使用动态子级

0 个答案: