Question

我在这里使用Angular2 / 4的Tab布局：

https://material.angular.io/components/tabs/overview

如何保留md-tab，就像它不存在一样，同时保留内容（以及显示标签的程序存在？注意我只想隐藏第一个标签（Tab One）和保持所有其他标签显示。

我想：

在页面加载时，仅显示选项卡二。（即使有两个选项卡，第一个选项卡[选项卡一]被隐藏，但显示该选项卡的内容，并在后端被认为是活动的）
默认情况下，即使未显示物理选项卡，显示的内容也是来自＆＃34; Tab One＆＃34;的内容。
用户可以点击＆＃34; Tab Two＆＃34;切换到第二个选项卡。
用户可以单击选项卡视图外部的完全独立的按钮，将tabview显示区域的内容切换为＆＃34; Tab One＆＃34; （即使没有显示Tab One的物理选项卡）

我想要完成的伪代码，如果有一个选项＆＃34; hideTabButKeepContent＆＃34;是可以的，我可以设置为真。如果有另一种方法可以做到这一点，如果没有这样的选项，我也对此持开放态度：

<mat-tab-group>
  <mat-tab label="One" hideTabButKeepContent="true">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

如果使用css或其他选项这是不可能的，如果有一些其他可用于角度2/4的库，那么最好知道。或者说这是不可能的......

Answer 1

您可以在单独的块中输出您的标签中的所有数据，当您隐藏标签时，您将显示该标签。请参阅此伪代码：

<mat-tab-group>
  <mat-tab label="One" *ngIf="hideTabButKeepContent(someChangingParameterOrEvent)"> 
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

hideTabButKeepContent(param){
  displayTab:boolean=true;
  if(param){
    outputDataToSepareteBlockAndDisplayIt(data)
    displayTab=false;
  }
  return displayTab;
}

如何隐藏制表符，但保留以角度材质显示的制表符内容为angular2？

1 个答案: