html - 使用指令隐藏有角度的材料 mat-tab
问题描述
我正在使用角度材质选项卡,我想使用指令来动态隐藏选项卡元素。
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
)?
这是一个堆栈闪电战示例。
我也想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';
}
}
只要没有HideMeDirective
放在div上,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>
推荐阅读
- spring-boot - 如何在与 JSF 集成的 Spring 中显示托管 Bean 的值
- puppet - Puppet:如何仅在特定节点/ip 上安装包 httpd?
- c - 当被问到 y 或 n 时如何让程序重复
- python - 基本算术运算程序
- java - 优先级链接队列添加方法帮助
- javascript - 更改展开/折叠导航中的默认箭头
- python - 如何使用 kwargs 在函数参数中自动完成?
- android - 如何设置图像的背景颜色,但在边界内?
- javascript - chrome.tabs.executeScript - 如何使用 keydown 事件注入代码
- google-sheets - 最大分数然后向左偏移一列