Question

我想使用标签进行导航。我跟着the documentation逐字：

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

<router-outlet></router-outlet>

这在桌面上看起来很棒：

但在手机上看起来很可怕：

如果我使用md-tab-group（非导航）标签，它们在移动设备上看起来很棒：

<md-tab-group>
  <md-tab label="Navigation tab 1"></md-tab>
  <md-tab label="Navigation tab 2"></md-tab>
  <md-tab label="Navigation tab 3"></md-tab>
  <md-tab label="Navigation tab 4"></md-tab>
  <md-tab label="Navigation tab 5"></md-tab>
</md-tab-group>

我做错了什么，或者这是材料2中的错误？有没有办法让md-tab-nav-bar响应，或让md-tab-group作为导航栏工作？

Answer 1

是的，<nav mat-tab-nav-bar>不能用作<mat-tab-group>。我使用的一种可能的快速解决方案就是让容器滚动：

.mat-tab-nav-bar {
  white-space: nowrap;
  overflow: auto;
}

哪个看起来可以接受且足够干净，但在滚动时会显示原生滚动条。

Answer 2

I just found this issue概述了md-tabs和md-tab-nav-bar之间的脱节：

当前的“md-tab-group”实现已经看起来很棒（当标签超出容器宽度等时动态高度，滚动，分页..）但是使用“md-tab-nav-bar”组件这些功能都没有可用。

它已经被分配并且有一个“重要”标签，所以我想这是材料团队认可的。

Answer 3

在adamport提到的问题的最底部有一个潜在的解决方法。

从解决方法转述（原始信用到daiky00）：

<nav mat-tab-nav-bar>
    <mat-tab-group>
        <mat-tab *ngFor="let yourVariable of yourLinks">
             <ng-template mat-tab-label>
                <a  mat-tab-link 
                      [routerLink]="yourVariable.path"
                      [routerLinkActiveOptions]="{exact: true}"
                      routerLinkActive #rla="routerLinkActive">
                {{yourVariable.data['label']}} <!-- or however your links are set up-->
                </a>
            </ng-template>
       </mat-tab>
    </mat-tab-group>
</nav>

Answer 4

我做了一个非常好的解决方法。您可以使用MatTab的事件'selectedTabChange'使其看起来像链接：

- HTML -

  <mat-tab-group 
  (selectedTabChange)="onLinkClick($event)" 
  [selectedIndex]="selectedTab" 
   mat-stretch-tabs>
   <mat-tab *ngFor="let link of links" label="TabLabel">


   </mat-tab>

  </mat-tab-group>

- MODEL -

export class NavOption{
 routerLink:string;
 title:string;
 constructor(routerLink:string,title:string){
    this.routerLink = routerLink;
    this.title = title;
  }
}

- TS -

import { MatTabChangeEvent } from '@angular/material/tabs';
import { NavOption } from '../model/route.model';

links = Array<NavOption >=[...]

constructor(private router: Router) {}


onLinkClick(event: MatTabChangeEvent) {
  console.log(event);
  let tabTitle = event.tab.textLabel;
  let routerLink = this.navs.find(n => n.title == tabTitle ).routerLink;

   this.router.navigate(['/' + routerLink]);
  }

它运作良好，只有没有入口动画。

材料2 md-tab-nav-bar包裹在手机上

4 个答案: