如何隐藏制表符，但保持制表符的内容显示在angular2的有角材质中?

问题描述：

我在这里使用Angular2/4来使用Tab布局:

I am using the Tab layout here using Angular2/4:

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

如何在不显示md-tab的情况下隐藏它，同时又要保留内容(以及显示的选项卡的编程存在性?)请注意，我只想隐藏第一个选项卡(Tab One)并保留所有显示其他标签.

How do I hide the md-tab as if it didn't exist, while keeping the content (and the programmatic existance of the tab displayed? Note that I only want to hide the first tab (Tab One) and keep all the other tabs showing.

我想要:

在页面加载时，仅显示选项卡二.(即使有两个选项卡，第一个选项卡[Tab One]也被隐藏，尽管该选项卡的内容已显示并且在后端被认为是活动的)
默认情况下，即使未显示物理选项卡，显示的内容也是制表符一"中的内容.
用户可以单击选项卡二"切换到第二个选项卡.
用户可以在选项卡视图之外单击完全独立的按钮，以将选项卡视图显示区域的内容切换为选项卡一个"的内容(即使没有显示选项卡一个"的物理选项卡)

要完成的目标的伪代码，如果可以使用"hideTabButKeepContent"选项，则可以将其设置为true.如果没有这样的选项，如果还有另一种方法可以做到这一点，我也很乐意:

Pseudocode of what I want to accomplish, if there was an option to "hideTabButKeepContent" was available that I could set to true. If there is an alternate way of doing this if such an option is not available, I am open to that too:

<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或其他选项无法完全做到这一点，那么如果还有其他一些适用于angular 2/4的库可以解决此问题，那么最好知道.还是id这完全不可能...

If this is flat out impossible with css or other options, if there is some other library for angular 2/4 that would work with this, it would be good to know. Or id this is flat out impossible...

答

您只需在标签页中隐藏标签时显示的单独块中，就可以从标签页中输出所有数据.参见以下伪代码:

You can just output all your data's from your tab in the separate block wich you'll show when u hide a tab. See this pseudocode:

<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的有角材质中?

相关推荐