親からの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を参照してください。あなたは、以下のように親コンポーネントからディレクティブの機能を呼び出すためにViewChildAPIを使用することができます

Answer 2

、

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