Angular中ngShow和ngHide的等价物是什么？

Question

我有一些元素,我想在某些条件下可见.

在AngularJS中我会写

<div ng-show="myVar">stuff</div>

我怎么能在Angular中做到这一点？

Answer 1

刚刚绑定到该hidden属性

[hidden]="!myVar"

也可以看看

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

问题

hidden有一些问题,因为它可能与CSS的display属性冲突.

了解如何some在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 VS [hidden]

*ngIf在[hidden]修改display属性时有效地从DOM中删除其内容,并仅指示浏览器不显示内容,但DOM仍然包含它.

Answer 2

[hidden]="!myVar"

要么

*ngIf="myVar"

这是显示/隐藏元素的两种方法.[hidden]和之间的唯一区别*ngIf是,*ngIf它将添加或完全从DOM中删除元素,但[hidden]浏览器将使用CSS的display属性显示/隐藏元素,它将保留在DOM中.

Answer 3

我发现自己处于相同的情况,区别于我的情况,元素是一个弹性容器.如果不是你的情况,一个简单的工作可能是

[style.display]="!isLoading ? 'block' : 'none'"

在我的情况下,由于我们支持的许多浏览器仍然需要供应商前缀以避免问题我去了另一个简单的解决方案

[class.is-loading]="isLoading"

那里的CSS很简单

&.is-loading { display: none } 

然后离开默认类处理的显示状态.

Answer 4

对不起,我不同意使用Angular 2时绑定到hidden被认为是不安全的.这是因为隐藏的样式可以轻松覆盖,例如使用

display: flex;

推荐的方法是使用更安全的*ngIf.有关更多详细信息,请参阅Angular官方博客.用角度2避免5个新秀错误

<div *ngIf="showGreeting">
   Hello, there!
</div>

Answer 5

这对我有用：

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

Answer 6

<div [hidden]="myExpression">

myExpression 可以设置为 true 或 false

Answer 7

对于遇到此问题的任何其他人，这就是我完成它的方式。

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');
    }
  }
}

我使用'visibility'是因为我想保留元素占用的空间。如果您不想这样做，您可以使用'display'并将其设置为'none';

您可以将它绑定到您的 html 元素，无论是否动态。

<span hide="true"></span>

或者

<span [hide]="anyBooleanExpression"></span>

Answer 8

如果您的情况是样式为 display none，您也可以使用 ngStyle 指令并直接修改显示，我这样做是为了引导 DropDown，它的 UL 设置为不显示。

所以我创建了一个点击事件来“手动”切换 UL 以显示

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

然后在我每次切换的组件上，我有 showDropDown:bool 属性，并基于 int，为样式设置 displayDDL，如下所示

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

Answer 9

像使用控件绑定任何模型一样使用hidden并为其指定css：

HTML：

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS：

[hidden] {
   display: none;
}

Answer 10

根据ngShow和ngHide 的Angular 1 文档，这两个指令都根据该指令的条件将 css 样式添加display: none !important;到元素中（对于 ngShow，将 css 添加到 false 值，而对于 ngHide，将 css 添加到 true 值）。

我们可以使用 Angular 2 指令 ngClass 来实现这种行为：

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

请注意，对于showAngular2中的行为，我们需要在 ngShowVal!之前添加（不），而对于hideAngular2 中的行为，我们不需要在 ngHideVal!之前添加（不）。

Answer 11

在 Bootstrap 4.0 中，类 "d-none" = "display: none!important;"

<div [ngClass]="{'d-none': exp}"> </div>