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

Posted 2023-02-23

【中文标题】Angular - 动态加载选项卡名称和组件

【英文标题】：Angular - load the tab name and component dynamically

【发布时间】：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>

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

【参考方案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非常有用。