Angular 路由器链接内部<；垫选项卡>；角材料

或

。

我对Angular是个新手，尝试使用上述Angular材质组件的布线

但当我点击主页标签时，它并没有附加URL。

---

这方面的任何帮助。

您实际上可以将它们合并为一个，如下所示：

---

我就是这样实现的

app.component.html

<nav mat-tab-nav-bar>
  <a mat-tab-link
  *ngFor="let link of navLinks"
  [routerLink]="link.link"
  routerLinkActive #rla="routerLinkActive"
  [active]="rla.isActive">
 {{link.label}}
</a>
</nav>
<router-outlet></router-outlet>

路由.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/tabtest1', pathMatch: 'full' },
  { path: 'tabtest1', component:  TestComponent1},
  { path: 'tabtest2', component:  TestComponent2},

];

export const appRouting = RouterModule.forRoot(routes);



@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  exports:[
    RouterModule
  ],

  declarations: []
})
export class AppRoutingModule { }

如果您需要在
中单击
设置
路由链接
，我希望这对您有所帮助，而无需任何变通方法，也无需直接使用
mat tab nav
逻辑事物更改当前代码-您可以使用mat tab组侦听器
（selectedTabChange）=“onTabChanged（$event）”
：

.html：

<mat-tab-group
  (selectedTabChange)="onTabChanged($event)"
>
<mat-tab label="Link to some thing"></mat-tab> <!-- empty stub tab only for link -->
<mat-tab label="Some content tab"> ... content there ... </mat-tab>

</mat-tab-group>




{{link}
禁用链接
您的回答让我找到了我需要的解决方案，但是您应该提到，使用此解决方案时，您不应该使用，但感谢@Toongeres！答案已更新以澄清唯一的问题是，如果一次有多个选项卡，滑块（箭头）将丢失，默认情况下，这是mat tab GROUP，如果我向“a”元素添加（单击）=“onTabClick（）”，并且在onTabClick（）函数中添加console.log（this.activeLinkIndex），则我得不到正确的索引值。知道如何正确跟踪活动链接索引吗？
<mat-tab-group
  (selectedTabChange)="onTabChanged($event)"
>
<mat-tab label="Link to some thing"></mat-tab> <!-- empty stub tab only for link -->
<mat-tab label="Some content tab"> ... content there ... </mat-tab>

</mat-tab-group>


onTabChanged(event: MatTabChangeEvent): void {
    switch (event.index) {
      case 0: // index of the tab
        // this is our stub tab for link
        this.router.navigate(['/admin/my-link']);
        break;
      case 1:
        // do stuff with content or do nothing :)
        break;
    }