Angular2 - 从父指令获取数据

angular2 - get data from parent directive

本文关键字：获取 数据 指令 Angular2      更新时间：2023-09-26

我有一个表单指令，里面有一个消息指令来打印表单中的数据。

形式.html

<form [ngFormModel]="form">
      <input ngControl="field">
      <message></message>
</form>

登录.js

export class Form{
form;
constructor(_form: FormBuilder) {
    this.form = _form.group({
        'field': ['', Validators.required]
    });
}

消息.js

export class Message {
    constructor() {}
get errorMessage() {
    console.log(form);<--- Here form is needed
}

}

在消息指令中访问表单模型的最佳方法是什么？

只需使用 @Input 装饰器向Message组件添加一个参数：

@Component({
  (...)
})
export class Message {
  @Input()
  form: Control;
  constructor() {}
  get errorMessage() {
    console.log(this.form);
  }
}

您可以按如下所述传递参数：

<form [ngFormModel]="form">
  <input ngControl="field">
  <message [form]="form"></message>
</form>

另一种选择是将父组件注入子组件：

@Component({
  (...)
})
export class Message {
  constructor(parent:Form) {
    this.form = parent.form;
  }
  (...)
}
相关文章：