我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
我发现自己处于相同的情况,与我的情况不同,元素是一个伸缩容器。如果不是你的情况,一个简单的工作可以
[style.display]="!isLoading ? 'block' : 'none'"
在我的例子中,由于我们支持的许多浏览器仍然需要供应商前缀来避免问题,我选择了另一种简单的解决方案
[class.is-loading]="isLoading"
哪里的CSS是简单的
&.is-loading { display: none }
将显示的状态留给默认类处理。
其他回答
对于其他无意中遇到这个问题的人来说,这就是我如何做到的。
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>
对我来说,[隐藏]=!瓦尔从来没有成功过。
因此,<div *ngIf="expression" style="display:none;" >
<div *ngIf="expression">总是给出正确的结果。
这对我来说很管用:
<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>
我发现自己处于相同的情况,与我的情况不同,元素是一个伸缩容器。如果不是你的情况,一个简单的工作可以
[style.display]="!isLoading ? 'block' : 'none'"
在我的例子中,由于我们支持的许多浏览器仍然需要供应商前缀来避免问题,我选择了另一种简单的解决方案
[class.is-loading]="isLoading"
哪里的CSS是简单的
&.is-loading { display: none }
将显示的状态留给默认类处理。
隐藏属性可以用于此
[hidden]="!myVar"
另请参阅
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
问题
hidden有一些问题,因为它可能与CSS的display属性冲突。
看看Plunker例子中的一些没有被隐藏,因为它有一个样式
:host {display: block;}
集。(这可能在其他浏览器中表现不同-我用Chrome 50测试)
解决方案
你可以通过添加来修正它
[hidden] { display: none !important;}
到index.html中的全局样式。
另一个陷阱
hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;
是一样的
hidden="true"
并且不会显示元素。
Hidden ="false"将分配字符串"false",该字符串被认为是真值。 只有值为false或删除属性才会实际生成元素 可见。
使用{{}}也会将表达式转换为字符串,不会像预期的那样工作。
只有绑定[]才会像预期的那样工作,因为这个false被赋值为false而不是“false”。
*ngIf与[hidden]
*ngIf有效地从DOM中删除了它的内容,而[hidden]修改了display属性,只是指示浏览器不显示内容,但DOM仍然包含它。