Angular-动态加载选项卡名称和组件

debugcn 发表于 Dev

Shakthifuture

在我的应用程序中，我想动态加载选项卡名称和组件。

JSON数据下方包含tab name和tab links

"menu" : {
     "First": "link1",
     "Second": "link2",
     "Third": "link3"
}

链接配置如下角路由器文件

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'link1', component: HomeComponent},
  { path: 'link2', component: UserPreferenceComponent},
  { path: 'link3', component: TableComponent },
  { path: '**', redirectTo: '' }
];

我想基于JSON中配置的链接加载选项卡。

<mat-tab-group>
    <mat-tab label="First"> <!--Link 1 component --> </mat-tab>
    <mat-tab label="Second"> <!--Link 2 component --> </mat-tab>
    <mat-tab label="Third"> <!--Link 3 component --> </mat-tab>
</mat-tab-group>

链接1组件的意思是 <app-home></app-home>

有人可以让我知道如何实现吗？

Msk Satheesh

使用 Object.entries

方法1：不进行路由

app.component.html

<mat-tab-group>
    <mat-tab *ngFor="let tab of obj" [label]="tab[0]">
        <app-home *ngIf="tab[1] == 'link1'"></app-home>
        <app-user-preference *ngIf="tab[1] == 'link2'"></app-user-preference>
        <app-table *ngIf="tab[1] == 'link3'"></app-table>
    </mat-tab>
</mat-tab-group>

app.component.ts

  matTabs: any = {
    menu: {
      First: "link1",
      Second: "link2",
      Third: "link3"
    }
  };
  obj: any;

  constructor() {
    this.obj = Object.entries(this.matTabs.menu);
  }

方法2：使用路由

app.component.html

<mat-tab-group (selectedTabChange)="tabChange($event)">
     <mat-tab *ngFor="let tab of obj;" [label]="tab[0]">
     </mat-tab>
</mat-tab-group>
<router-outlet></router-outlet>

app.component.ts

matTabs: any = {
    menu: {
      First: "link1",
      Second: "link2",
      Third: "link3"
    }
  };
  obj: any;

  constructor() {
    this.obj = Object.entries(this.matTabs.menu);
  }

  tabChange(evt: MatTabChangeEvent) {
    this.router.navigate([this.matTabs.menu[evt.tab.textLabel]]);
  }

这里的stackblitz例子：

https://stackblitz.com/edit/angular-mat-tab-active-xfa7n7?file=app/tabs-template-label-example.ts

希望这可以帮助：）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。