md-tab-group 中的 md-tabs 在滚动时不会保持固定答案

【问题标题】：md-tabs inside md-tab-group do not remain fixed while scrollingmd-tab-group 中的 md-tabs 在滚动时不会保持固定
【发布时间】：2018-03-30 23:38:25
【问题描述】：

我正在为这个东西使用有角度的材料标签。我的代码如下所示：

<md-tab-group>
    <md-tab style="position: fixed;top:0;" label={{category}} *ngFor="let category of itemCategory">
    </md-tab>
</md-tab-group>

而css就是：

.q-header {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    align-items: center;
    padding-left: 10px;
    z-index: 100000000;
    /*justify-content: center;*/
    color: white;
    background-color: #42AB9E;
}

但不知何故，标签在滚动时不会保持固定。我怎样才能做到这一点？

【问题讨论】：

您使用的是哪个 AM 版本？
@Vega "2.0.0-beta.11
这是一个特定的选择吗？最新版本遥遥领先
几个月前我集成了它，当时这是最新的。

标签： angular angular-material

【解决方案1】：

1.使用 ::ng-deep。

使用 /deep/ 穿透阴影的后代组合器来强制样式通过子组件树向下进入所有子组件意见。 /deep/ 组合器适用于任何深度的嵌套组件，它适用于视图子项和内容子项零件。仅在模拟视图中使用 /deep/、>>> 和 ::ng-deep 封装。 Emulated 是默认和最常用的视图封装。有关详细信息，请参阅控制视图封装部分。穿透阴影的后代组合器是已弃用，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于所有 3 个 /deep/，>>> 和::ng-deep)。在那之前::ng-deep 应该是更广泛的首选与工具的兼容性。

CSS：

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed;
}

DEMO

2。使用 ViewEncapsulation

... 组件 CSS 样式被封装到组件的视图中并且不影响应用程序的其余部分。为了控制这个封装发生在每个组件的基础上，您可以设置视图组件元数据中的封装模式。选择从以下模式： .... None 表示 Angular 不查看封装。 Angular 将 CSS 添加到全局样式中。范围界定前面讨论的规则、隔离和保护不适用。这个本质上与将组件的样式粘贴到 HTML。

没有值是您设置材质样式所需的零件。

打字稿：

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })

CSS

.mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed;
}

DEMO

3.在 style.css 中设置样式

这一次您必须使用 !important 来“强制”样式。

style.css

.mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
}

DEMO

【讨论】：