角2：条件付き出力プロパティーバインディング

Question

出力プロパティーに条件付きでバインドできますか？このようなもの：<my-Component (myOutputProp)="funcThatReturnsTrueOrFalse()? func1() : func2()"></my-component>

私は上記の例と同様に<my-Component (myOutputProp)="funcThatReturnsFunc1OrFunc2()></my-component>を試しました。

実際にバインドを変更することができず、EventListenersからnativeElementにアクセスできず、通常のイベントバインディングでこれを行うことができるという兆候が見られました。どちらかを働かせることができませんでした。

ありがとうございました。

UPDATE

私の出力特性は次のように定義されています。

@Output() myOutputProp: EventEmitter<any> = new EventEmitter<any>();

UPDATE 2私のコントロールを超えた理由から

、私はちょうど1つのイベントを発生することはできませんtrue/falseに基づいてその中で分岐します。主に1つの状況では、私の三元式の評価からfalse値が出力特性には何も結合していないだろう、と私は（myOutputProp.observers.length経由で）私の子コンポーネント内のことを検出できるようにする必要がありますので、

Answer 1

あなたはにEventEmitterを使用することができますはブール値に基づいてを放出します。 emit(...)メソッドで適切な値を押してください。

ここには、2つのコンポーネントを含む簡単な例があります。 1つのコンポーネントは、ボタンをクリックすると変更されるString値を放出するボタンです。他のコンポーネントは、そのイベントを消費し、それを表示しています。ここでデモを見つけることができます：https://stackblitz.com/edit/angular-4natth

ここには簡単なボタンがあります。ボタンをクリックするとブール値のフラグが設定されます。このフラグは、イベント・エミッターによって発行されるストリングを判別します。

@Component({ 
    selector: 'my-example', 
    template: '<button mat-raised-button (click)="doThings()">Click me!</button>' 
}) 
export class ExampleComponent { 

    @Output() 
    status: EventEmitter<string> = new EventEmitter(); 

    flag = false; 

    doThings() { 
    this.flag = !this.flag; // toggle the boolean flag 
    this.status.emit(this.getValue()); // push the value 
    } 

    private getValue() { 
    if(this.flag) { 
     return "Truthy!"; 
    } 
    return "Falsy!"; 
    } 
} 

第二成分が消費していると値が(status)から放出される：

@Component({ 
    selector: 'my-container', 
    template: '<my-example (status)="updateStatus($event)">loading...</my-example><p>Current status: {{status}}</p>' 
}) 
export class ContainerComponent { 
    status: string = "Not set yet - click the button!"; 

    updateStatus(value: string) { 
    this.status = value; 
    } 
} 

ボタンをクリックするたびに

は、 EventEmitter.emit(...)メソッドが呼び出され、適切な値をプッシュします。もう一方の端では、 (status)="updateStatus($event)"を使用してイベントが消費されます。この場合、 $eventはstring型です。これは、EventEmitterが文字列を送出すると宣言したためです。私は簡単にboolean値を出していて、代わりに放出された値に基づいて異なるメソッドを実行することもできます。

---

したがって、たとえば、あなたのコンポーネントでこれを持っていると言う：

@Output() 
myOutputProp: EventEmitter<boolean> = new EventEmitter(); 

あなたは、このような何か行うことができます：

<my-Component (myOutputProp)="someFunc($event)"></my-component> 

をそして、このようなあなたのsomeFunc定義：

を

someFunc(emittedValue: boolean) { 
    emittedValue ? func1() : func2(); 
} 

---

または、イベントエミッタの出力を、ブール値ではなく保存する必要がある値にする必要があるとします。

<my-Component (myOutputProp)="someFunc($event)"></my-component> 

そして、このようなあなたの someFunc定義：あなたはまだ同じコンポーネントを宣言することができますが、 直接があなたの代わりにすることができ、イベントエミッタに三元をバインドすることはできませんしながら、だから、

someFunc(emittedValue: any) { 
    funcThatReturnsTrueOrFalse() ? func1(emittedValue) : func2(emittedValue); 
} 

を振り向いて静的なものをバインドして、それ自身を呼び出します。