Angular 4 Material 2 - 中心选项卡组件答案

【问题标题】：Angular 4 Material 2 - Center Tab ComponentsAngular 4 Material 2 - 中心选项卡组件
【发布时间】：2017-07-22 15:26:30
【问题描述】：

我不知道如何使 Angular Material 选项卡组件居中。

可以在这里看到： https://material.angular.io/components/tabs/overview

我认为甚至有一种方法可以做到这一点，只是非常不清楚 imo 该怎么做。

以下是文档的屏幕截图。属性是什么意思？是在 html 中还是需要在 typescript 中设置？

非常感谢您的帮助。

【问题讨论】：

我已经更新了答案。此项目不应出现在 API 调用文档中。我最终创建了一个 PR 来修复它，文档将很快更新。

标签： angular angular-material2

【解决方案1】：

看起来您正在寻找的是md-stretch-tabs 属性，它应该应用于<md-tab-group>：

<md-tab-group md-stretch-tabs>
    <md-tab label="Tab 1">
        <p>Content for tab 1.</p>
    </md-tab>
    <md-tab label="Tab 2">
        <p>Content for tab 2.</p>
    </md-tab>
    ...
</md-tab-group>

Plunker

【讨论】：

【解决方案2】：

这是一个不应公开的内部调用。已发出一个请求以解决此问题，但您将无法使用此 API 调用。

检查this issue on github 以获取更新。

抱歉，这不是您要找的答案。

【讨论】：

【解决方案3】：

您可以在投影内容时使用md-tab-body属性设置位置值。

此position 值应使用typescript code 设置。

<md-tab-group>
  <md-tab label="Tab 1"  >
     <div md-tab-body #tab >
      <button (click)="clickedMe()">Clicked</button>
    </div>
  </md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

打字稿代码

  @ViewChild('tab') tab: TemplateRef;
   ngAfterViewInit(){
     console.log(this.tab);
     this.tab.position = 100;
   }
   ngAfterContentInit(){
     console.log(this.tab);
   }
   clickedMe(){
     console.log(this.tab);
   }

LIVE DEMO

【讨论】：

这似乎并没有改变相对于其他标签的位置，这是位置标签应该做的。

【解决方案4】：

我还尝试首先使用 API 调用中的位置将它们对齐在中心。但是，放弃之后，我在组件样式中添加了以下内容：

.mat-tab-labels{
    justify-content: center;
}

然后，在我的组件打字稿文件中包含封装装饰器：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'mytabs',
    templateUrl: './mytabs.component.html',
    styleUrls: ['./mytabs.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Try it on Stackblitz

@Edrik 提到的“md-stretch-tab”属性，正如其名称所述，拉伸制表符。但是，在这种方法中，我们只是将它们对齐在中心。

【讨论】：