web-dev-qa-db-fra.com

Evénement lorsque le composant devient visible

Est-il possible dans Angular2 de déclencher un événement lorsque mon composant devient visible? Il est placé dans un tabcontrol et je souhaite être averti lorsque l'utilisateur bascule. J'aimerais que mon composant déclenche un événement.

eventsangulartypescript
19
Shimrod

Ce que j’ai finalement fait (ce qui n’est pas très beau, mais fonctionne alors que je n’ai pas de meilleur moyen de le faire ...) est d’utiliser le callback ngAfterContentChecked() et de gérer le changement moi-même.

@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

Il n’existe pas d’événement de ce type, mais si vous utilisez un contrôle de tabulation, la meilleure façon de procéder consiste à créer un changement de tabulation @Output Pour votre contrôle de tabulation s’il est personnalisé. Sinon, la plupart des contrôles de tabulation (comme ng-bootstrap ) possède également un événement de changement de tabulation.

Si votre composant doit en être conscient, vous pouvez utiliser cet événement de changement d'onglet pour déterminer quel onglet est visible, et si vous savez quel onglet est visible, vous savez également si votre composant est visible ou non. Donc, vous pouvez faire quelque chose comme ça:

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

Et vous pouvez ensuite l'envoyer à votre composant lui-même si vous avez une entrée:

@Input() activated: boolean = false;

Et vous pouvez ensuite l'appliquer avec:

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

Vous pouvez maintenant écouter OnChanges pour voir si la valeur du modèle activated a été remplacée par true.

Vous pouvez aussi le refactoriser pour utiliser un service avec un Observable comme ceci:

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

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

Lorsqu'un composant souhaite écouter ces modifications, il peut s'abonner à tabService.observable. Lorsque votre onglet change, vous pouvez y insérer de nouveaux éléments avec tabService.observer.next().

6
g00glen00b

Vous pouvez utiliser le rappel ngAfterViewInit()

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

Mettre à jour

La nouvelle API Intersection Observer peut être utilisée pour cela https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Voir aussi https: // stackoverflow. com/a/44670818/217408

6
Günter Zöchbauer