angular - Sự kiện mỗi khi thành phần trở nên hiển thị

Có cách nào trong Angular2 để một sự kiện được kích hoạt khi thành phần của tôi trở nên 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 tab. Tôi muốn thành phần của mình phát ra một sự kiện.

Câu trả lời #1

Cuối cùng những gì tôi đã làm (mà không đẹp lắm nhưng hoạt động khi tôi chưa có cách tốt hơn để làm...) là sử dụng callback ngAfterContentChecked() và tự xử lý sự 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;
    }
}

Câu trả lời #2

Không có sự kiện như vậy, nhưng nếu bạn đang sử dụng điều khiển tab, cách đúng để làm việc này là tạo một @Output thay đổi tab cho điều khiển tab của bạn nếu nó là 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ự kiện thay đổi tab.

Nếu thành phần của bạn cần phải nhận 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 đang hiển thị, và nếu bạn biết tab nào đang hiển thị, bạn cũng biết liệu thành phần của bạn có đang hiển thị hay không. Vì vậy, bạn có thể làm điều gì đó như sau:

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

Và sau đó bạn có thể gửi nó đến chính thành phần của bạ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ể lắng nghe OnChanges để xem liệu giá trị mô hình activated có thay đổi thành true hay không.

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

@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 muốn lắng nghe các thay đổi này, nó có thể đăng ký với tabService.observable. Khi tab của bạn thay đổi, bạn có thể đẩy các mục mới vào đó bằng tabService.observer.next().