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

【问题标题】：mat-ink-bar location not update when container resizes容器调整大小时，mat-ink-bar 位置不更新
【发布时间】：2020-03-19 21:54:47
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

你能创建一个你的代码的堆栈闪电战
如果@Hargun 的评论解决了您的问题，请您标记为已接受。
我不久前发布了一个类似的问题。请看Ink bar under centered tabs not being aligned properly when opening sidenav using Angular Material

标签： angular angular-material

【解决方案1】：

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

要进一步了解该错误，请查看thread

示例：（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>

【讨论】：

您只需复制+粘贴您的tabs.component.ts 代码吗？您的小提琴链接最终可能会腐烂。

【解决方案2】：

这不是有史以来最好的解决方案，但作为一种解决方法，它确实有效。

在我的情况下，内容加载并导致垂直滚动条，它会稍微调整页面大小（但window.onresize 没有捕捉到这个调整大小事件，所以还不能捕捉到它），并将错误的对齐设置为 @ 987654322@。我的解决方法 - 监听路由事件，等待 setTimeout 加载内容，延迟 1 秒，然后重新对齐 mat-ink。

@ViewChild('matTabsRef', { static: false }) matTabsRef: MatTabNav;

fixResizeInkBar() {
  setTimeout(() => {
      if (this.matTabsRef) {
        this.matTabsRef._alignInkBarToSelectedTab();
      }
    }, 1000);
}

private listenRoutes(): void {
    this.subs.add(
      this.router.events
        .pipe(
          filter((event) => event instanceof NavigationEnd),
          startWith(true)
        )
        .subscribe((event) => {
          this.fixResizeInkBar();
        })
  );
}

【讨论】：

【解决方案3】：

AFAIK mat-tab-nav-bar 不像 mat-tab-group 没有 realignInkBar() 而是你需要在 mat-tab-nav-bar 上使用 _alignInkBarToSelectedTab() 像下面的代码：

  <nav #tabs mat-tab-nav-bar mat-stretch-tabs>
    <a  mat-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="link.link"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive"
       style="text-decoration: none">
      <span {{ link.label }}</span>
    </a>
    <a mat-tab-link >Disabled Link</a>
  </nav>

在您的组件中，您首先需要将选项卡定义为@ViewChild，然后调用该方法：

 @ViewChild('tabs', {static: false}) tabs;
  realignInkBar() {
    // this.tabs.realignInkBar();
    this.tabs._alignInkBarToSelectedTab();
  }

【讨论】：