我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
<div [hidden]="flagValue">
---content---
</div>
其他回答
抱歉,我不同意将绑定为hidden,因为在使用Angular 2时,它被认为是不安全的。这是因为隐藏样式可以很容易地覆盖,例如使用
display: flex;
建议使用*ngIf,这样更安全。更多细节,请参考Angular官方博客。使用Angular 2要避免的5个新手错误
<div *ngIf="showGreeting">
Hello, there!
</div>
这个答案是为那些不知道如何隐藏一个元素,从.ts文件可见
TS文件
实现OnInit { isHidden:boolean = false; 隐藏(){ 这一点。isHidden = true; } 取消隐藏(){ 这一点。isHidden = false; } }
HTML文件
< div[隐藏]=“isHidden >的< / div > <巴顿(click) =“hide ()“巴顿>隐藏< / > <巴顿(click) =“unHide ()“巴顿> UnHide < - >
<div [hidden]="flagValue">
---content---
</div>
对我来说,[隐藏]=!瓦尔从来没有成功过。
因此,<div *ngIf="expression" style="display:none;" >
<div *ngIf="expression">总是给出正确的结果。
对于其他无意中遇到这个问题的人来说,这就是我如何做到的。
import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";
@Directive({
selector: '[hide]'
})
export class HideDirective implements OnChanges {
@Input() hide: boolean;
constructor(private renderer: Renderer2, private elRef: ElementRef) {}
ngOnChanges() {
if (this.hide) {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
} else {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
}
}
}
我使用“可见性”是因为我想保留元素所占据的空间。如果你不希望这样做,你可以使用'display'并将其设置为'none';
你可以将它绑定到你的html元素,动态的或者非动态的。
<span hide="true"></span>
or
<span [hide]="anyBooleanExpression"></span>