Angular-2-material mat-ink-bar 不在默认选项卡上

Question

我正在尝试在我的网站上布置标签，我正在使用 md-tab-group 来实现这一点。我无法让墨栏处于默认状态，但是，在相应选项卡上写的内容可用。墨迹栏出现在点击而不是页面的初始化上。下面是我的代码

<md-tab-group dynamicHeight = "true" >
   <md-tab id="hello1" label="Tab 1">
    <!-- some content here -->
   </md-tab>

   <md-tab id="hello2" label="Tab 2">
  <!-- some content here -->
   </md-tab>

</md-tab-group>

我尝试过的解决方案是 a) selectedIndex not working in md-tab-group when dynamically generating tabs b) Angular Material Tabs SelectedIndex 0 not working

知道我忽略了什么吗？

Answer 1

我的默认选项卡在初始加载时没有让墨栏在默认选项卡下划线。我找不到文档或搜索的修复程序，因为它应该开箱即用......我认为这是 changeDetection: ChangeDetectionStrategy.OnPush 和最初绘制墨栏的问题。有一个重新对齐墨栏的超时似乎得到了我想要的行为。这是我的 hacky 解决方案(我不喜欢，所以如果有人有更好的解决方案，我很乐意听到):

组件.html:

<mat-tab-group [selectedIndex]="0">
  <mat-tab label="one"></mat-tab>
  <mat-tab label="two"></mat-tab>
  <mat-tab label="three"></mat-tab>
</mat-tab-group>

component.ts(使用 changeDetection: ChangeDetectionStrategy.OnPush):

  // hook into the ngAfterViewInit lifecycle hook to get the tab group object
  @ViewChild(MatTabGroup, { static: false }) tabGroup!: MatTabGroup;

  // after view check, should have populated the tab group
  ngAfterViewInit(): void {
    // hacky solution to get the ink bar to draw the initial underline:
    timer(2500)
      .pipe(take(1))
      .subscribe(() => this.tabGroup.realignInkBar());
  }

编辑:在 GitHub 上发现一个 Unresolved 问题:https://github.com/angular/components/issues/11811