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

【问题标题】：Angular - load the tab name and component dynamicallyAngular - 动态加载选项卡名称和组件
【发布时间】：2021-05-16 05:58:39
【问题描述】：

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

以下 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>

Link 1 组件表示<app-home></app-home>

有人可以告诉我如何实现吗？

【问题讨论】：

标签： angular dynamic tabs components

【解决方案1】：

使用Object.entries

方法一：无路由

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

方法二：带路由

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

希望这会有所帮助:)

【讨论】：

我觉得你理解错了，如果链接匹配，我们应该打电话给<app-home></app-home>，更新问题，请检查

【解决方案2】：

    @Injectable({
        providedIn: 'root'
    })
    export class OrderService {
    
        activeTab: string = '';

        constructor() { }
        
        tabSetter(args: string): void {
            this.activeTab = args;
        }
    
        tabGetter(): string {
            return this.activeTab;
        }
    }

/////////// Inject the service into your component ////////

activeTab: string = '';
constructor(private service: OrderService) {
this.activeTab = this.service.tabGetter();

【讨论】：

我想你误会了，我已经更新了我的问题。请检查

【解决方案3】：

您可以在您的服务上制作setter和getter函数来设置标签名称并获取激活标签的名称

【讨论】：

我没看懂，你能用例子补充更多细节吗？
如果你提供一个可以解决描述问题的代码sn-p非常有用。