使用指令

Question

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

html模板

<mat-tab-group>
  <!-- how to hide this using 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？

Here是一个令人眼花stack乱的例子。

---

我也希望mat-tab是可切换的。在this示例中，我希望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）时，元素不可见。有什么想法吗？

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

Answer 2

<mat-tab>只是另一个指令，它会生成更多代码，这些代码在执行前就不会出现。您必须隐藏一个特定的div，该div根据选项卡的数量来获取ID。

这就是为什么您在<mat-tab>指令上的隐藏指令不起作用的原因。

您必须编写一个使用这些类作为选择器来针对这些元素的指令。

this.el.nativeElement.children
   .find(child => child.querySelector('.mat-tab-label') !== null)
.style.display == "none"; // there might be a better solution than that

Answer 3

那呢：

<mat-tab-group>
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
<div appHideMe>
 <mat-tab label="Second"> Content 2 </mat-tab>
</div>

  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>