通过输入将组件传递给指令

Question

我完全不知道发生了什么。

我正在尝试为我的自定义组件编写一个简单的指令，该指令基于值（来自 ngModel）将值传递给其他组件（也传递给 ngModel）。

看起来是这样的：

<form-text
    required
    birthDateExtracter="dateOfBirth"
    name="id"
    [(ngModel)]="model.idNumber"></form-text>

<form-datepicker #dateOfBirth
    name="Birth Date"
    [(ngModel)]="model.birthDate"></form-datepicker>

我的指令是这样的：

@Directive({
  selector: '[ngModel][birthDateExtracter]'
})
export class BirthDateExtracterDirective {

  _component: any;

  @Input('birthDateExtracter')
  set birthDate(value: any) {
    this._component = value;
    console.log(value); //it's not working
  }

  constructor(private model: NgModel) {
  }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    console.log(event); //it works fine
  }
}

但是我的输入传递的不是组件而是 "dateOfBirth" 字符串。我希望这是一个愚蠢的小学生错误或打字错误，但我无法处理。或者也许我应该用另一种方式来实现。这种方式有错误吗？

Answer 1

你好像忘记了方括号。我想应该是：

[birthDateExtracter]="dateOfBirth"

或者另一种方法是使用插值

birthDateExtracter="{{dateOfBirth}}"

通过输入将组件传递给指令

Passing component to directive by input

angular-ngmodel

angular-directive

angular