使用指令隐藏角度材料 mat-tab

Question

我正在使用角度材料选项卡，我想使用指令动态隐藏选项卡元素。

模板

<mat-tab-group>
  <!-- how to hide this using a directive? -->
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
  <!-- like this -->
  <mat-tab *ngIf="false" label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div>

HideMe 指令

    @Directive({
      selector: '[appHideMe]'
    })
    export class HideMeDirective implements AfterViewInit {
      constructor(
        private el: ElementRef
      ) { }

      ngAfterViewInit() {
        this.el.nativeElement.style.display = 'none';
      }
    }

在编译期间， mat-tab 被替换，因此 display = 'none' 将不起作用。有什么方法可以隐藏 mat-tab 就像 *ngIf 一样（使用 HideMeDirective ）？

这 是一个 stackblitz 示例。

---

我还希望 mat-tab 可以切换。在 这个 例子中，我希望 third 是可见的，但它不是。

模板

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <div>
    <mat-tab label="First"> Content 1 </mat-tab>
  </div>
  <div appHideMe="hide">
    <mat-tab label="Second"> Content 2 </mat-tab>
  </div>
  <div appHideMe>
    <mat-tab label="Third"> Content 3 </mat-tab>
  </div>
  <div>
    <mat-tab label="Fourth"> Content 4 </mat-tab>
  </div>

</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div>

指令代码

    @Directive({
      selector: '[appHideMe]'
    })
    export class HideMeDirective implements AfterViewInit {

      @Input() appHideMe: string;

      constructor(
        private el: ElementRef
      ) { }

      ngAfterViewInit() {

        if (this.appHideMe === 'hide') {
          this.el.nativeElement.style.display = 'none';
        }
        // should be displayed
        // this.el.nativeElement.style.display = 'none';
      }
    }

只要div上没有 HideMeDirective ，就会显示 mat-dat 。添加 HideMeDirective 时（参见第三个 mat-tab ），该元素不可见。有任何想法吗？

原文由 tprieboj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样的事情

定义一个变量

import { Directive, ElementRef, AfterViewInit,ChangeDetectorRef } from '@angular/core';
@Directive({
    selector: '[appHideMe]',
    exportAs:'appHideMe',
})

export class HideMeDirective implements AfterViewInit {
    hide:Boolean;
    constructor(
        private el: ElementRef,
        private cdr:ChangeDetectorRef
    ) { }

    ngAfterViewInit() {
        this.hide=false;
        this.cdr.detectChanges();
    }
}

然后使用模板参考

<mat-tab appHideMe #ref="appHideMe" label="First"> Content 1 </mat-tab>
<mat-tab *ngIf="ref.hide" label="Second"> Content 2 </mat-tab>

示例： https ://stackblitz.com/edit/angular-mqc1co-vlw9aa

原文由 Chellappan வ 发布，翻译遵循 CC BY-SA 4.0 许可协议