Sự kiện khi thành phần hiển thị

Question

Có cách nào trong Angular2 có sự kiện được kích hoạt khi thành phần của tôi hiển thị không? Nó được đặt trong một tabcontrol và tôi muốn được thông báo khi người dùng chuyển mạch tôi muốn thành phần của tôi để kích hoạt một sự kiện.

Answer 1

Điều cuối cùng tôi đã làm (không đẹp lắm nhưng hoạt động trong khi tôi không có cách nào tốt hơn để làm điều đó ...) là sử dụng gọi lại ngAfterContentChecked() và tự xử lý thay đổi.

@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

Bạn có thể sử dụng ngAfterViewInit() callback

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

Answer 3

Không có sự kiện như vậy, nhưng nếu bạn đang sử dụng một điều khiển tab, cách thích hợp để làm điều này sẽ tạo ra một sự thay đổi tab @Output cho điều khiển tab của bạn nếu tùy chỉnh, nếu không, hầu hết các điều khiển tab (như ng-bootstrap) cũng có một số sự kiện thay đổi tab.

Nếu thành phần của bạn phải biết điều này, bạn có thể sử dụng sự kiện thay đổi tab này để phát hiện tab nào hiển thị và nếu bạn biết tab nào hiển thị, bạn cũng biết liệu thành phần của mình có hiển thị hay không. Vì vậy, bạn có thể làm một cái gì đó như thế này:

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

Và sau đó bạn có thể gửi nó đến thành phần của bạn chính nó nếu bạn có một đầu vào:

@Input() activated: boolean = false; 

Và sau đó bạn có thể áp dụng nó với:

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

Bây giờ bạn có thể nghe OnChanges để xem giá trị mô hình activated có thay đổi thành true hay không.

---

Bạn cũng có thể cấu trúc này để sử dụng dịch vụ với một Observable như thế này:

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

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

Khi một thành phần mong muốn lắng nghe những thay đổi này, nó có thể đăng ký để tabService.observable. Khi tab của bạn thay đổi, bạn có thể đẩy các mục mới vào nó bằng tabService.observer.next().