mat-ink-bar location not update when container resizes

问题

I using angular-material mat-tab-nav-bar

I have side menu on the right side of the screen, click on it change the width of the side menu, and the center screen width change according to the menu width.

the problem is that the mat-ink-bar right/left position not changed.

Any idea?

回答1:

You can force the ink bar to re-align by calling realignInkBar() on mat-tab-group,check out this example on StackBlitz

To read further on the bug check out this thread

回答2:

It is not the best solution ever, but as a workaround, it works.

In my case content loads, and causes a vertical scrollbar, it resizes the page a bit (but window.onresize doesn't catch this resize event, so can't catch it yet), and sets the wrong alignment to mat-ink. My workaround - listen for routing event, wait for content loading by setTimeout with 1sec delay and realign 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();
        })
  );
}

来源：https://stackoverflow.com/questions/59017741/mat-ink-bar-location-not-update-when-container-resizes