如何从父进程访问attr指令内的函数？ （Angular2）

Question

我希望能够通过父级中的用户交互来访问我的attr指令中的函数。我准备了一个插图来证明;

https://plnkr.co/edit/MZONsuh7O6bWgZfE0mZ2?p=preview

在此示例中，当用户键入输入时会触发事件。我想知道一旦发生这种情况是否可能，还要触发attr指令中的onChange()函数？

不确定如何实现这一目标，欢迎任何建议！

谢谢，

以下代码

app.ts

@Component({
  selector: 'my-app',
  template: `
      <div testGenerator></div>
      <input type="text" (input)="detectChange($event)" />
  `,
})
export class App {

  constructor() {
  }

  detectChange(e){
    console.log(e.target.value)
  }

}

测试指令：

import {Directive} from '@angular/core';

@Directive({
  selector: '[testGenerator]'
})
export class TestDirective {

  constructor() {
  }

  onChange(){
    console.log("hello")
  }
}

Answer 1

最简单的方法是使用指令exportAs选项和模板引用。请参阅plunkr。

Answer 2

您可以使用 ViewChild API 从父组件调用指令函数，如下所示，

DEMO：https://plnkr.co/edit/zDVtxuzNPssxzBlpozjv?p=preview

export class App {
  @ViewChild(TestDirective) vc:TestDirective;  //<<<---added

  constructor() {
  }

  detectChange(e){
    console.log(e.target.value)
    this.vc.onChange();                        //<<<---added
  }

}

Answer 3

模板驱动的解决方案也是可能的。将inputValue绑定到Directive： plunkr