1

我正在尝试在我的网站上布置标签，我正在使用 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 Tabs SelectedIndex 0 not working

知道我在忽略什么吗？

4

3 回答 3

3

我的默认选项卡没有让墨水条在初始加载时为默认选项卡下划线。我找不到文档或搜索的修复程序，因为它应该开箱即用......我认为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 上发现一个未解决的问题：https ://github.com/angular/components/issues/11811

于 2020-02-04T19:57:57.057 回答
0

我建议升级您的角度和材质版本，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

于 2018-12-03T13:55:11.320 回答
0

我遇到了同样的问题mat-tab-nav-bar，这是相同的控件，但您没有提前为每个选项卡定义内容块。

结果（对我来说）我的标签栏在第一次初始化时在页面上不可见。它实际上嵌套在另一个选项卡中，但是当它不可见时它无法确定宽度。

在此处输入图像描述

所以一切都很完美，除了inkBar（蓝色条）的宽度为0px.

解决方案将根据您的页面而有所不同，但这可能有助于诊断问题。

  • this._inkBarPositioner在浏览器中搜索
  • 在这里放一个断点，看看宽度是否为零。

如果您使用嵌套选项卡并看到此问题，您可以通过切换到模板选项卡（在文档中称为异步加载选项卡）来修复它。

该函数MatTabBar._alignInkBarToSelectedTab是私有的，但是一旦您知道控件实际上是可见的，您可以尝试将其作为最后的手段调用。

哈克解决方案＃1

nav.mat-tab-nav-bar ::ng-deep .mat-ink-bar
{
    min-width: 160px;  // or whatever your min size is
}

这个 css 是针对mat-tab-nav-bar（独立的选项卡导航栏）而不是mat-tab-group/mat-tab但几乎可以肯定地调整以适应选项卡/组控件。

于 2021-09-03T01:22:23.627 回答