Zdarzenie, gdy składnik staje się widoczny

Question

Czy jest jakiś sposób w Angular2, aby zdarzenie zostało wywołane, gdy mój komponent stanie się widoczny? Jest on umieszczony w tabControl i chcę otrzymać powiadomienie, gdy użytkownik się przełącza Chciałbym, aby mój komponent wywołał zdarzenie.

Answer 1

Co w końcu zrobiłem (co nie jest piękne, ale działa, gdy nie mam lepszego sposobu na zrobienie tego ...), należy użyć wywołania zwrotnego ngAfterContentChecked() i samodzielnie obsłużyć zmianę.

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

Answer 2

Można użyć ngAfterViewInit() zwrotnego

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

Answer 3

Nie ma takiego zdarzenia, ale jeśli używasz formantu karty, właściwy sposób to zrobić byłoby utworzyć zmianę zakładki @Output dla kontrolka na karcie, jeśli jest niestandardowa, w przeciwnym razie większość elementów sterujących na karcie (takich jak ng-bootstrap) również ma pewne zdarzenia związane z wymianą kart.

Jeśli Twój komponent musi być tego świadomy, możesz użyć tego zdarzenia zmiany karty, aby wykryć, która karta jest widoczna, a jeśli wiesz, która karta jest widoczna, wiesz również, czy Twój składnik jest widoczny, czy nie. Więc można zrobić coś takiego:

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

a następnie można przesłać go do siebie komponentu jeśli masz wejście:

@Input() activated: boolean = false; 

a następnie można zastosować go z:

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

Teraz można posłuchać OnChanges, aby sprawdzić, czy wartość modelu activated została zmieniona na true.

---

Można również byłaby to skorzystać z usługi z Observable tak:

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

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

Kiedy składnikiem chce słuchać tych zmian, może zapisać się do tabService.observable. Gdy twoja karta się zmieni, możesz przesłać do niej nowe elementy za pomocą tabService.observer.next().