親コンポーネントは、子コンポーネントに含まれる入力に焦点を合わせます

bugfix> angular > 投稿

そのような他のコンポーネント（親）のページhtmlにコンポーネント（子）があります：

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

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

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

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

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

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

angular

parent-child

communication

回答 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";
}

あなたの答え

関連記事