如何隐藏选项卡，但在 angular2 的角度材料中保留选项卡的内容显示? [英] How to hide tab, but keep content of tab displayed in angular material in angular2?

问题描述

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

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

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

如何隐藏 md-tab 就好像它不存在一样，同时保持内容(以及显示的选项卡的编程存在?请注意，我只想隐藏第一个选项卡(选项卡一)并保留所有显示的其他标签.

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.

我想要:

1. 在页面加载时，仅显示标签二.(即使有两个选项卡，第一个选项卡 [Tab One] 被隐藏，但显示该选项卡的内容并且在后端将其视为活动的)
2. 默认情况下，显示的内容是Tab One"中的内容，即使不显示物理标签也是如此.
3. 用户可以点击标签二"切换到第二个标签.
4. 用户可以在标签视图之外点击一个完全独立的按钮，将标签视图显示区域的内容切换到标签一"的内容(即使标签一的物理标签没有显示)

我想要完成的伪代码，如果有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 库可以与此配合使用，那么最好知道.或者，这完全不可能......

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 的角度材料中保留选项卡的内容显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！