[英]Hide angular material mat-tab using directive
我正在使用角材料選項卡,我想使用指令動態隱藏選項卡元素。
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'
將不起作用。 有什么方法可以像*ngIf
那樣隱藏mat-tab
嗎(使用HideMeDirective
)?
這是一個堆棧閃電戰示例。
我還希望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
),元素不可見。 有任何想法嗎?
嘗試這樣的事情
定義一個變量
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>
那這個呢:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.