Question

我正在使用mat-tab-nav-bar在组件中创建两个标签，即：

1-基本数据

2-账单金额

当我单击第一个选项卡时，它使用服务向另一个选项卡发送id，而不是将其发送给另一个选项卡，反之亦然这段代码到容器组件中（包括两个选项卡）我想在此链接旁边放置参数（id和is）链接：“基本数据” 如何将它们连接到“基本数据”

this.navLinks = [
  {
    label: 'بيانات أساسية',
    link: 'basic-data',
    index: 0
},
     {
        label: 'مصروف فاتورة',
        link: 'bill-money',
        index: 1
    },        
];

这在routing.module中

{
path: 'invoice', component: InvoiceComponent,
children: [
  { path: 'basic-data/:id/:isn', component: BasicDataComponent },
  { path: 'bill-money', component: BillMoneyComponent },
]  }

[更新] 容器组件中的mat-tab-nav-bar

<nav  mat-tab-nav-bar dir="rtl">
<div>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive"
style="font-size: x-large;color: black"
>{{link.label}}
</a>
</div>
</nav>
<router-outlet></router-outlet>

Answer 1

只要已设置id和id的变量，就可以将它们添加到该项目的link属性中的列表中：

this.navLinks = [
  {
    label: 'بيانات أساسية',
    link: ['basic-data', id, isn],
    index: 0
},
     {
        label: 'مصروف فاتورة',
        link: 'bill-money',
        index: 1
    },        
];

Answer 2

我不确定，但这就是你想要的吗？

<nav  mat-tab-nav-bar dir="rtl">
  <div>
    <a mat-tab-link
       *ngFor="let link of navLinks"
       (click)="onNavigateUser(link.link)"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive"
       style="font-size: x-large;color: black">
      {{link.label}}
    </a>
  </div>
</nav>

和ts

constructor(private router: Router) {}
onNavigateUser(link) {
  let id = 0; // the id which should be put in url
  let isn = '';  // the isn which should be put in url
   this.router.navigate([link, id, isn ]);
}

如何连接参数以链接到mat-tab-nav-bar

2 个答案: