<mat-tab> 角材质内的 routerLink

Posted

技术标签:

【中文标题】<mat-tab> 角材质内的 routerLink【英文标题】:routerLink inside <mat-tab> angular material 【发布时间】:2018-06-06 13:32:47 【问题描述】:
<a routerLink="/add"></a><mat-tab label="Add Identity"></mat-tab>

<mat-tab label="Add Identity"> <a routerLink="/add"></a></mat-tab>.

我是 Angular 新手,正在尝试将路由与上述 Angular 材质组件一起使用。

但是当我单击主页选项卡时,它没有附加 URL。 对此有任何帮助。

【问题讨论】:

唯一的问题是,如果一次有很多标签,滑块(箭头)会丢失,默认情况下是 mat-tab-group 【参考方案1】:

您实际上可以像这样将它们组合成一个:

&lt;a mat-tab-link [routerLink]="/add"&gt;Add Identity&lt;/a&gt;

您还需要确保您使用的是&lt;nav mat-tab-nav-bar&gt;,而不是&lt;mat-tab-group&gt;

此处的文档:https://material.angular.io/components/tabs/overview#tabs-and-navigation

【讨论】:

您的回答使我找到了我需要的解决方案,但是您应该提到,使用此解决方案,不应使用 ,而应使用 感谢@toongeorges!答案已更新以澄清【参考方案2】:

这就是我的实现方式。

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>

应用组件

export class AppComponent implements OnInit
  title = 'app';
  navLinks: any[];
  activeLinkIndex = -1;

  constructor(private router: Router) 
    this.navLinks = [
        
            label: 'TabTest1',
            link: './tabtest1',
            index: 0
        , 
            label: 'Tab Test2',
            link: './tabtest2',
            index: 1
        , 
            label: 'Tab Test3',
            link: './tabtest3',
            index: 2
        , 
    ];

ngOnInit(): void 
  this.router.events.subscribe((res) => 
      this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
  );


routing.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  

我希望这对某人有帮助

【讨论】:

如果我在 onTabClick() 函数中添加 (click)="onTabClick()" 到 "a" 元素和 console.log(this.activeLinkIndex) 我没有得到正确的索引值。知道如何正确跟踪活动链接索引吗?【参考方案3】:

如果您需要在&lt;mat-tab-group&gt; 内单击&lt;mat-tab&gt; 上设置routerLink,而无需使用mat-tab-nav 直接使用任何变通方法和更改当前代码逻辑事物-您可以使用mat-tab-group listener (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>

.ts:

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;
    

【讨论】:

【参考方案4】:

<nav mat-tab-nav-bar [backgroundColor]="background">
  <a mat-tab-link *ngFor="let link of links"
     (click)="activeLink = link"
     [active]="activeLink == link"> link </a>
  <a mat-tab-link disabled>Disabled Link</a>
</nav>

参考:https://material.angular.io/components/tabs/overview#tabs-and-navigation

【讨论】:

以上是关于<mat-tab> 角材质内的 routerLink的主要内容,如果未能解决你的问题,请参考以下文章

悬停时的角材质图标

角度材质选项卡(mat-tab)未显示内容

ace.edit在mat-tab中找不到div#javascript-editor

如何使用角镖组件材质阴影和排版?

如何在 Dart 2 中使用材质角镖组件的排版?

使用 FlexBox Grid 的角度材料(mat-tab)内的水平滚动条