如何在与mat-tab-group

Question

在一个角度模板文件中，我们有2个选项卡摘要和预览，我必须在不属于mat-tab-group的一部分的水平同一行中添加指向该行的链接，即它不是mat-tab。通过用一个div包裹mat-tab-group并将链接放置在另一个div中，我可以使它们水平对齐，但是这会打开很多空白空间，这会破坏外观。我应该制作``Preview''和``View Survey Dashboard''第二个标签内同一标签的一部分，中间有一些空白-但在这种情况下，如果您单击预览或查看仪表板，将具有相同的效果，即预览页面的一部分，而我想将其传输到仪表板。

它应该看起来像这样：

编辑：1代码段：

<mat-tab-group animationDuration="0ms" dynamicHeight="true" 
                (selectedTabChange)="tabClick($event)" id="Survey-lib-webapp">
    <mat-tab label="Summary">
    ...
    </mat-tab>
    <mat-tab label="Preview">
    ...
    </mat-tab>
  </mat-tab-group>

Answer 1

我通过以下方式解决了这个问题-相对位置最远的div和绝对位置的View Dashboard div。一个问题是View Dashboard链接变得不可点击，指针事件：自动进行救援。

<div style="position: relative;">
<div>
  <mat-tab-group animationDuration="0ms" dynamicHeight="true"  
  (selectedTabChange)="tabClick($event)" id="Survey-lib-webapp">

    <mat-tab label="Summary">
    ...
    </mat-tab>
    <mat-tab label="Preview">
    ...
    </mat-tab>
     </mat-tab-group>
</div>
<div style="position: absolute; top: 2vh; left: 75vw; z-index: 5;">
  <a style="font-size:1.285rem; font-weight:400;pointer-events: auto" href="#" (click)="onNavigateViewDashboard(dialogData)">View Dashboard</a>
</div>
</div>

我要感谢@Mosh Feu分享了使我入门的链接。