Question

我已经在角度4中创建了3个选项卡。目前我正在处理2个选项卡，我想在未来的第3个选项卡上工作。

我想使用javascript / typescript隐藏第3个标签。

app.component.html

<div>
  <ul class="nav-tabs">
    <li class="tab" *ngFor="let tab of tabs" [class.tab--active]="tab.active">
      <label (click)="clickTab(tab)">{{ tab.name }}</label>
    </li>
  </ul>
  <div class="tab-content">
    <app-detail *ngIf="tabs[0].active" [app1]="app1"></app-detail>
    <app-detail1 *ngIf="tabs[1].active" [app1]="app1"></app-detail1>
    <app-detail2 *ngIf="tabs[2].active" [app1]="app1"></app-detail2>
  </div>
</div>

Answer 1

为什么要使用Typescript？使用CSS。

ul.nav-tabs li:nth-child(3){
   display: none;
}

Answer 2

您只需在tabs[2].active = false构造函数中设置AppComponent，或ngOnInit

export class ActiveTabsPipe implements PipeTransform {
    public transform(values: any[]): any[] {
        return values.filter(val => val.active);
    }
}


<li class="tab" *ngFor="let tab of tabs | activeTabs" [class.tab--active]="tab.active">

Answer 3

将您的HTML更改为：

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    TextBox textBox = sender as TextBox;
    if (textBox != null)
    {
        const int count = 100;
        int searchIndex = 0;
        int.TryParse(textBox.Text, out searchIndex);
        if (searchIndex > count)
        {
            var textChange = e.Changes.First();
            if (textChange != null && textChange.AddedLength > 0)
            {
                int caret = textBox.CaretIndex;
                int length = textBox.Text.Length;
                textBox.TextChanged -= TextBox_TextChanged;
                textBox.Text = textBox.Text.Substring(0, textChange.Offset) + textBox.Text.Substring(textChange.Offset + textChange.AddedLength);
                textBox.TextChanged += TextBox_TextChanged;
                textBox.CaretIndex = caret - Math.Abs(textBox.Text.Length - length);
            }
        }
    }
}

在您要隐藏的<div> <ul class="nav-tabs"> <li class="tab" *ngFor="let tab of tabs" *ngIf="!tab.hidden" [class.tab--active]="tab.active"> <label (click)="clickTab(tab)">{{ tab.name }}</label> </li> </ul> <div class="tab-content"> <app-detail *ngIf="tabs[0].active" [app1]="app1"></app-detail> <app-detail1 *ngIf="tabs[1].active" [app1]="app1"></app-detail1> <app-detail2 *ngIf="tabs[2].active" [app1]="app1"></app-detail2> </div> </div>对象中添加hidden字段，并将其设置为tab。

如何使用angular4中的angular4隐藏导航选项卡

3 个答案: