Javascript Angular 2访问具有动态子级的父组件变量

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

同一页面上可以有多个表单组件（这意味着我无法使用全局服务来控制此操作）

我不知道会提前添加哪些表单组件。（这意味着我将无法将它们包括在父模板中）

假设我有一个界面：

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>
    <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

我想这就是你想要的：@Sam是的，但在这种情况下没有全局服务，每个组件都依赖于它的父组件。

<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>