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在md-tab-group中不起作用 b）Angular Material选项卡SelectedIndex 0不起作用

知道我忽略了什么吗？

Answer 1

我的默认选项卡没有让墨水栏在初始加载时为默认选项卡加下划线。我无法通过文档或搜索找到解决方案，因为它应该开箱即用...我认为这是changeDetection: ChangeDetectionStrategy.OnPush最初绘制墨迹条的问题。通过超时重新调整墨迹栏似乎得到了我想要的行为。这是我的黑客解决方案（我不喜欢，所以如果有人有更好的解决方案，我很想听听）：

组件.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>

组件.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 上发现一个未解决的问题：https ://github.com/angular/components/issues/11811