容器调整大小时，mat-ink-bar 位置不会更新

Question

我使用角材料 mat-tab-nav-bar

我在屏幕右侧有侧边菜单，点击它改变侧边菜单的宽度，中心屏幕宽度根据菜单宽度变化。

问题是 mat-ink-bar 的右/左位置没有改变。

任何的想法？

Answer 1

您可以通过在 mat-tab-group 上调用 realignInkBar() 强制墨条重新对齐，在StackBlitz上查看此示例

要进一步了解错误，请查看此线程

示例：（TabsComponent）

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  @ViewChild('tabs', {static: false}) tabs;
  selectedIndex: number;

  isHidden: boolean = true;

  constructor() { }

  ngOnInit() {
  }

  toggleExpandCard() {
    this.tabs.realignInkBar(); // Remove this line to 'break' the example
    this.isHidden = !this.isHidden;
  }

}

示例：（tabs.component.html）

<div class="header">
  <button type="button"(click)="toggleExpandCard()">
    Click here to {{isHidden ? 'show' : 'hide'}} tabs!
  </button>
</div>
<div class="wrapper">
  <div class="tabs-wrapper" [hidden]="isHidden">
  <mat-tab-group [(selectedIndex)]="selectedIndex" #tabs>
    <mat-tab label="Earth">
      <p>...is round</p>
    </mat-tab>
    <mat-tab label="Wind">
      <p>...can be painful</p>
    </mat-tab>
    <mat-tab label="Fire">
      <p>...requires attention</p>
    </mat-tab>
  </mat-tab-group>
  </div>
</div>