web-dev-qa-db-ja.com

angular * ngIfステートメントがテンプレートで評価されるときに発生するイベント

次の場合：

<div *ngIf="user$ | async as user" class="container">
   <p>{{user.name}}</p>
</div>

上記のdivが最終的に画面に表示されたときにコードを実行する方法はありますか？

angularangular-ng-ifangular-template
13
Sammy

NgIfは、そのDOM要素とすべての添付コンポーネント/ディレクティブを削除します。したがって、イベントが最初に作成されたときにイベントを実行する単純なディレクティブを記述するだけで済みます。 ngIfがfalseからtrueに移行すると、ディレクティブが作成されます（再度、など...）

@Directive({selector: '[after-if]'})
export class AfterIfDirective implements AfterContentInit {
    @Output('after-if')
    public after: EventEmitter<AfterIfDirective> = new EventEmitter();

    public ngAfterContentInit(): void {
        setTimeout(()=>{
           // timeout helps prevent unexpected change errors
           this.after.next(this);
        });
    }
}

サンプルHTML：

<div *ngIf="user$ | async as user" class="container" (after-if)="your expression">
    <p>user.name</p>
</div>
13
Reactgular

解決策新しいディレクティブを作成しないは、@ViewChildの振る舞いを利用することです。

ビュークエリを構成するプロパティデコレータ。変更検出器は、ビューDOMでセレクターに一致する最初の要素またはディレクティブを探します。ビューDOMが変更され、新しい子がセレクターと一致する場合、プロパティが更新されます。

重要な部分はビューDOMが変更された場合これは、この場合、要素が作成または破棄されたときにのみトリガーされることを意味します。

最初に要素の変数名を宣言します。使用したサンプルでは#userContent

    <div #userContent *ngIf="user$ | async as user" class="container">
      <p>user.name</p>
    </div>

次に、コンポーネント内に@ViewChild参照を追加します。

    @ViewChild('userContent') set userContent(element) {
      if (element) {
         // here you get access only when element is rendered (or destroyed)
      }
    }

このソリューションは 別の質問 内で提供されました。また、@ViewChildの動作の詳細も利用可能です こちら 。

2
Luis Limas