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解决方案（我不喜欢，所以如果有人有更好的解决方案，我很想听听）：

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

Answer 2

我建议您升级角度和材质版本，md-表示您正在使用较旧版本的材质库。

请使用当前版本的材料库查看此stackblitz示例...请注意新语法。

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

https://stackblitz.com/angular/earngvqxaaon?file=app%2Ftab-group-basic-example.html

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

2 个答案: