本文介绍了如何隐藏选项卡,但在 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 的角度材料中保留选项卡的内容显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 02:53