Material 2 md-tab-nav-bar 在移动设备上换行

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>

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

Answer 1

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

The current "md-tab-group" implementation is already looking great (Dynamic height, scrolling, pagination when tabs exceed container width etc..) But with the "md-tab-nav-bar" component none of these features are available.

它已被分配并有一个 "important" 标签，所以我想这是 Material 团队的认可。

一定要去那里，给它一个帮助让它优先。

Answer 2

在 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 3

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

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

看起来可以接受并且足够干净，但在滚动时显示本机滚动条。

Answer 4

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

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

--型号--

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]);
  }

效果不错，就是没有进入动画。

Material 2 md-tab-nav-bar 在移动设备上换行

Material 2 md-tab-nav-bar wraps on mobile

material-design

angular-material2

angular