bug(tabs): tabset select fires too often

[Sethcran]

tab.directive.ts has the following code:

public ngOnDestroy():void {
    this.tabset.removeTab(this);
}

Inside this removeTab call is some code that causes the active property to be set on a new tab (if the tab we're removing was previously active). This setter in turn emits the select event.

When the containing component is destroyed, this causes each tab to be destroyed, which can trigger a select if a new tab is activated. This one in turn being destroyed, triggers another one, etc.

This can cause problems when the (select) event handler has side effects.

For Example: When using the tabs with the router such that each tab content is tied to a url:

<tabset>
    <tab *ngFor="let tab of tabs" [heading]="tab.name" [active]="tab.active" (select)="navigate(tab.path)"></tab>
</tabset>
<router-outlet></router-outlet>

where the navigate call is defined as such:

navigate(route: string) {
    this.router.navigate(['/someroute', route]);
}

In this case, attempting to navigate away from this page from a child component (tab content with a [routerLink] / router.navigate / window.location.href) causes the tabs to be destroyed before the tabset is destroyed. This can cause several extra select events to be fired, which triggers navigation to a child page, overriding the childs navigate call.

Removing the OnDestroy of the tab.directive.ts fixes this problem for me, but I'm not sure if this breaks some other use case.

Will see if I have time to get up a repro plunkr later tonight once I get home.