Pesquisa de site

angular - Evento cada vez que o componente se torna visível

Existe uma maneira no Angular2 de disparar um evento quando meu componente se torna visível? Ele está colocado em um controle de abas e eu quero ser notificado quando o usuário mudar de aba. Eu gostaria que meu componente disparasse um evento.

Resposta #1

O que eu finalmente fiz (o que não é muito bonito, mas funciona enquanto eu não tiver uma maneira melhor de fazer...) foi usar o callback ngAfterContentChecked() e lidar com a mudança eu mesmo.

@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;
    }
}

Resposta #2

Não existe tal evento, mas se você estiver usando um controle de abas, a maneira correta de fazer isso seria criar um @Output de mudança de aba para o seu controle de abas se ele for personalizado, caso contrário, a maioria dos controles de abas (como ng-bootstrap) também possui algum evento de mudança de aba.

Se o seu componente precisa estar ciente disso, você pode usar este evento de mudança de aba para detectar qual aba está visível, e se você sabe qual aba está visível, você também sabe se o seu componente está visível ou não. Então você pode fazer algo assim:

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

E então você pode enviá-lo para o próprio componente se você tiver uma entrada:

@Input() activated: boolean = false;

E então você pode aplicá-lo com:

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

Agora você pode ouvir OnChanges para ver se o valor do modelo activated mudou para true.

Você também pode refatorar isso para usar um serviço com um Observable assim:

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

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

Quando um componente deseja ouvir essas alterações, ele pode se inscrever em tabService.observable. Quando sua aba mudar, você pode enviar novos itens para ele com tabService.observer.next().

Artigos relacionados