web-dev-qa-db-ja.com

コンポーネントが表示されるときのイベント

Angular2に、コンポーネントが表示されたときにイベントを発生させる方法はありますか？これはtabcontrolに配置されており、ユーザーがコンポーネントを切り替えてイベントを発生させたいときに通知されるようにします。

eventsangulartypescript
19
Shimrod

最後にやったこと（あまり美しくはありませんが、もっと良い方法はありませんが...）は、ngAfterContentChecked()コールバックを使用して、自分で変更を処理することです。

@ViewChild('map') m;
private isVisible: boolean = false;
ngAfterContentChecked(): void
{
    if (this.isVisible == false && this.m.nativeElement.offsetParent != null)
    {
        console.log('isVisible switched from false to true');
        this.isVisible = true;
        this.Refresh();
    }
    else if (this.isVisible == true && this.m.nativeElement.offsetParent == null)
    {
        console.log('isVisible switched from true to false');
        this.isVisible = false;
    }
}
14
Shimrod

そのようなイベントはありませんが、タブコントロールを使用している場合、これを行う適切な方法は、カスタムの場合はタブコントロールのタブ変更_@Output_を作成することです。 ng-bootstrap ）タブ変更イベントもあります。

コンポーネントがこれを認識しなければならない場合、このタブ変更イベントを使用して、表示されているタブを検出できます。また、表示されているタブがわかっている場合は、コンポーネントが表示されているかどうかもわかります。そのため、次のようなことができます。

_onTabChange(event) {
    this.currentTab = /** Get current tab */;
}
_

そして、入力がある場合は、コンポーネント自体に送信できます。

_@Input() activated: boolean = false;
_

そして、次の方法で適用できます。

_<my-component [activated]="currentTab == 'tabWithComponent'"></my-component>
_

OnChangesを聞いて、モデル値activatedがtrueに変更されたかどうかを確認できます。

これをリファクタリングして、次のようなObservableを持つサービスを使用することもできます。

_@Injectable()
export class TabService {
  observable: Observable<any>;
  observer;

  constructor() {
    this.observable = Observable.create(function(observer) {
      this.observer = observer;
    });
  }
}
_

コンポーネントがこれらの変更をリッスンする場合、_tabService.observable_をサブスクライブできます。タブが変更されたら、tabService.observer.next()を使用して新しい項目をプッシュできます。

6
g00glen00b

ngAfterViewInit()コールバックを使用できます

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

更新

新しいIntersection Observer APIを使用できます https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 関連項目 https：// stackoverflow。 com/a/44670818/217408

6
Günter Zöchbauer