bugfix> angular > 投稿

そのような他のコンポーネント(親)のページhtmlにコンポーネント(子)があります:

<div>
   <child-component (focusEmit)="startAnimation()"></child-component>
</div>

子コンポーネントには次の入力があります。

<input type="text" (focus)="focusFunction()"/>

focusFunction()は、何かを行う親にイベントを発行します。

このようにこのユースケースを解決したくありません。子コンポーネントがクリーンであることを望みます(他のネストされたコンポーネントがあるため、このユースケースは単純化され、出力の長いチェーンは出力されません)。

子コンポーネントに含まれる入力でイベントフォーカスをキャッチする親である他の方法はありますか?

回答 1 件
  • サブジェクト(rxJs)http://reactivex.io/rxjs/manual/overview.html#subjectを使用できます これは、EventEmitterの代替です。


    @Output eventEmitterを介してこの方法で行うことができます

    子コンポーネント

    @Output() focusEmit = new EventEmitter<any>();
    focusFunction() {
       this.focusEmit.emit(true);
    }
    
    

    親コンポーネント

    HTML

    <child-component (focusEmit)="startAnimation(event)"></child-component>
    
    

    component.ts

    startAnimation($event) {
        // Handle your code
    }
    
    

    ViewChildパターンを使用

    親コンポーネント

    <child-component  #childAttr></child-component>
    @ViewChild("childAttr") childAttr;
    childAttrId : string;
    startAnimation() {
        this.childAttrId  = childAttr.id;
    }
    
    

    ただし、子コンポーネントは同じままです

    focusFunction() {
       this.id = "focus triggered";
    }
    
    

あなたの答え