angular2 - 从父指令获取数据

时间:2016-02-09 09:18:42

标签: javascript dependency-injection angular

我有一个Form指令,并在一个messsage指令中打印出来自表单的数据。

Form.html

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

Login.js

export class Form{
form;

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

Message.js

export class Message {
    constructor() {}

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

}

在message指令中访问formModel的最佳方法是什么?

1 个答案:

答案 0 :(得分:3)

只需使用Message装饰器向您的@Input组件添加参数:

@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;
  }

  (...)
}