问选项卡应用-角6

EN

<mat-tab-group [selectedIndex]="selectedTab" backgroundColor="primary" color="primary" (selectedTabChange)="selectedTabChanged($event)" style="height:100%;">
      <mat-tab label="Dashboard">
        Dashboard Component -- none closable tab, does not depend on routing.
      </mat-tab>
      <mat-tab *ngFor="let tab of tabsComponents; index as i">
        <ng-template mat-tab-label>
          {{tab.title | translate}}
          <button mat-icon-button class="close-icon"
                  (click)="closeTab($event,i)">
            <mat-icon class="close-icon ">
              close
            </mat-icon>
          </button>
        </ng-template>
        <ng-container *ngComponentOutlet="tab.component; injector:tab.params" ></ng-container>
      </mat-tab>
    </mat-tab-group>

this.routerEventSub = router.events.pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((routeChange: NavigationEnd) => {
    this.layout.adjustLayout({ route: routeChange.url });

    let child = route.snapshot.firstChild.firstChild;
    console.log(child);
    if (this.tabsKeys.indexOf(routeChange.url) == -1) {
      this.tabsKeys.push(routeChange.url);

      let myParams: iTechParam = {
        _params: child.params,
        _queryParam: child.queryParams,
        _path:router.url
      }
      let params = Injector.create([
        { provide: iTechParam, useValue: myParams }
      ], this.inj);
      this.tabsComponents.push({ title: child.data['title'], component: child.component, params: params, path: router.url });
      this.selectedTab = this.tabsKeys.length;
    } else {
      this.selectedTab = this.tabsKeys.indexOf(routeChange.url) + 1;//+1 is because the dashboard tab, none-closable one
    }


  });

tabsKeys: string[] = [];//store the keys of the opened tabs
tabsComponents: ITechTab[] = [];// stores information about the component in each tab
selectedTab = 0; // store the index of the selected tab

closeTabByIndex(i: number) {
this.tabsKeys.splice(i, 1);
let removedtabs = this.tabsComponents.splice(i, 1);
if (this.router.url == removedtabs[0].path) {
  if (i == 0 && this.tabsComponents.length == 0) {
    this.router.navigate(['/dashboard']);
  } else {
    this.router.navigate([this.tabsComponents[i - 1].path]);
  }
}
}

<nav mat-tab-nav-bar [backgroundColor]="background">
    <a mat-tab-link routerLink="test-one" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">Test One</a>
    <a mat-tab-link routerLink="test-two" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">Test Two</a>
</nav>
<router-outlet></router-outlet>

import {Component} from '@angular/core';

/**
 * @title Basic use of the tab nav bar with routing
 */
@Component({
  selector: 'tab-nav-bar-basic-example',
  templateUrl: 'tab-nav-bar-basic-example.html',
  styleUrls: ['tab-nav-bar-basic-example.css'],
})
export class TabNavBarBasicExample {}

@Component({
  selector: 'test-one',
  template: '<p>Test One</p>'
})
export class TestOne {}

@Component({
  selector: 'test-two',
  template: '<p>Test Two</p>'
})
export class TestTwo {}

const appRoutes: Routes = [
  { path: '', redirectTo: 'test-one', pathMatch: 'full' },
  { path: 'test-one', component: TestOne },
  { path: 'test-two', component: TestTwo }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    ),
    ...
  ],
  entryComponents: [TabNavBarBasicExample],
  declarations: [TabNavBarBasicExample, TestOne, TestTwo],
  bootstrap: [TabNavBarBasicExample],
  providers: []
})
export class AppModule { }