Material 2 md-tab-nav-bar 包裹在移动设备上答案

【问题标题】：Material 2 md-tab-nav-bar wraps on mobileMaterial 2 md-tab-nav-bar 包裹在移动设备上
【发布时间】：2017-04-28 14:30:50
【问题描述】：

我想使用标签进行导航。我逐字关注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 用作导航栏？

【问题讨论】：

标签： angular material-design angular-material2

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

一定要去那里给它一个 ? 以帮助它优先处理。

【讨论】：

【解决方案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>

【讨论】：

在重新加载时成功设置标签，但它显示第一个标签选择的颜色。
我也注意到了这个问题，但没有时间修复它。如果您找到任何东西，请告诉我

【解决方案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>

--型号--

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

效果很好，只是没有入口动画。

【讨论】：