Tab应用程序-Angular 6

Question

我在构建我的角度应用程序时遇到问题。 我需要一个选项卡应用程序而不是路由，这是：每当用户单击应用程序中的新链接，而不是将应用程序路由到该组件时，它将：

1. 检查选项卡是否已打开，然后选择它
2. 如果未打开，则在导航选项卡的选项卡列表中添加一个新选项卡，然后选择它。
3. 每当用户单击选项卡时，路由器都会切换到新选项卡。
4. 当在浏览器中回击时，系统将选择上一个选项卡，或打开最后一个关闭的选项卡。

我最初的计划是：

1. 从应用程序中删除插座并添加[matTabNavBar]。
2. 侦听路线中的任何更改，并获取与路线相关的组件和参数。
3. 将路由用作选项卡的键（检查选项卡是否已存在）。
4. 如果组件不存在，则动态创建一个新选项卡并将组件添加到其中，然后选择该选项卡。

您能否为此提供帮助，我需要所有步骤的指导原则或最佳做法（收集想法）。 以及是否有一些组件或软件包可以帮助我实现这一目标。 谢谢

编辑：要清除示例，

假设我有一个从数据库加载的系统中的项目列表，当我要编辑项目时，将能够在其自己的选项卡中将其打开。 因此我可以同时打开多个项目。 当我通过新标签添加新项目时，我也应该能够在其自己的标签中打开该记录。 它们不仅仅是我要在它们之间路由的静态标签的列表

Answer 1

目前尚不清楚为什么您认为必须摆脱路由才能使用标签导航。 标签导航和路由不兼容。 要将MatTabNavBar和MatTabLink与路由一起使用，请设置您的应用程序路由，以使每个“标签”都是一条路由，将路由器选项添加到mat-tab-link元素，然后使用路由器出口托管标签内容。 这应该比您计划的要容易得多，因为您无需担心动态标签内容的“创建”和后退按钮的使用。

这里的选择的代码从一个基本的例子，充分演示是StackBlitz ：

模板

<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 { }

Answer 2

我可以通过以下方式实现我想要的功能：

1. 从应用程序中删除路由出口。
2. 添加一个Mat-tab-group而不是它。
3. 监听应用中的路由事件。
4. 从路由中获取所需的组件名称和参数。
5. 将其存储在键列表中，以便能够跟踪打开的内容并防止多次打开相同的组件（取决于需要）。
6. 使用* ngComponentOutlet在UI中动态加载组件
7. 使用可注入类传递参数
8. 使用具有Obseravables的单例注入服务来管理选项卡之间的事件。

代替出口

<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]);
  }
}
}