angular - Angular 2+ 中 ngShow 和 ngHide 的等价物是什么？

Question

我有一些我希望在特定条件下可见的元素。

在 AngularJS 我会写

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

我怎样才能在 Angular 2+ 中做到这一点？

score 1139 · Accepted Answer

该hidden属性可用于

[hidden]="!myVar"

也可以看看

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

问题

hidden但是有一些问题，因为它可能与display属性的 CSS 冲突。

看看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或删除属性才会真正使元素可见。

Using{{}}还将表达式转换为字符串，并且不会按预期工作。

只有绑定 with[]才能按预期工作，因为 thisfalse被分配为false而不是"false".

*ngIf对比[hidden]

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

score 178 · Accepted Answer

使用[hidden]属性：

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

这是显示/隐藏元素的两种方式。唯一的区别是：*ngIf将从 DOM 中删除元素，同时通过将元素保留在 DOM 中[hidden]来告诉浏览器使用 CSSdisplay属性显示/隐藏元素。

score 50 · Accepted Answer

我发现自己处于与我的情况不同的情况相同的情况下，元素是一个弹性容器。如果不是你的情况，一个简单的解决方法可能是

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

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

[class.is-loading]="isLoading"

那么CSS很简单

&.is-loading { display: none }

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

score 31 · Accepted Answer

抱歉，我不同意绑定到 hidden ，这在使用 Angular 2 时被认为是不安全的。这是因为隐藏样式可以很容易地被覆盖，例如使用

display: flex;

推荐的方法是使用更安全的 *ngIf。更多详细信息，请参考 Angular 官方博客。Angular 2 应避免的 5 个新手错误

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

score 15 · Accepted Answer

15

这对我有用：

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

于 2020-04-07T23:24:23.497 回答

score 11 · Accepted Answer

11

<div [hidden]="myExpression">

myExpression 可以设置为 true 或 false

于 2016-09-28T09:19:38.277 回答

score 8 · Accepted Answer

对于其他偶然发现这个问题的人，这就是我完成它的方式。

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>

score 7 · Accepted Answer

根据ngShow和ngHide的 Angular 1 文档，这两个指令都根据该指令display: none !important;的条件将 css 样式添加到元素中（对于 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>

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

score 6 · Accepted Answer

如果您的情况是样式为无显示，您也可以使用 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";
}

score 5 · Accepted Answer

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

HTML：

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

CSS：

[hidden] {
   display: none;
}

score 4 · Accepted Answer

4

如果你使用Bootstrap就这么简单：

<div [class.hidden]="myBooleanValue"></div>

于 2017-03-22T17:24:09.873 回答

score 4 · Accepted Answer

in bootstrap 4.0 the class "d-none" = "display: none!important;"

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

score 3 · Accepted Answer

3

<div [hidden]="flagValue">
---content---
</div>

于 2019-04-15T09:00:47.440 回答

score 2 · Accepted Answer

对我来说，[hidden]=!var从来没有工作过。

所以， <div *ngIf="expression" style="display:none;">

而且， <div *ngIf="expression">总是给出正确的结果。

score 1 · Accepted Answer

我的问题是使用 <ng-container *ngIf="myVar"> 在单击按钮时显示/隐藏垫表。表的“加载”非常慢，2-3 秒内有 300 条记录。

数据是使用 ngOnInit() 中的订阅加载的，并且可以在模板中使用并准备好使用，但是随着行数的增加，模板中表格的“加载”变得越来越慢。

我的解决方案是将 *ngIf 替换为：

<div [style.display]="activeSelected ? 'block' : 'none'">

. 现在，当单击按钮时，表格会立即加载。

score 1 · Accepted Answer

使用处理此问题的最佳方法ngIf 因为这将阻止该元素在前端呈现，

如果您使用[hidden]="true"或样式隐藏[style.display]它只会隐藏前端的元素，并且有人可以更改它的值并轻松查看它，在我看来隐藏元素的最佳方法是ngIf

<div *ngIf="myVar">stuff</div>

而且如果你有多个元素（也需要实现其他）你可以使用<ng-template>选项

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>

示例 ng 模板代码

score 0 · Accepted Answer

如果您只想使用AngularJS 附带的对称hidden/指令，我建议编写一个属性指令来简化模板，如下所示（使用 Angular 7 测试）：shown


import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

许多其他解决方案是正确的。您应该尽可能使用*ngIf。使用该hidden属性可能会应用意想不到的样式，但除非您正在为其他人编写组件，否则您可能知道是否是这样。因此，要使该shown指令起作用，您还需要确保添加：

[hidden]: {
  display: none !important;
}

到某个地方的全局样式。

有了这些，您可以像这样使用指令：

<div [shown]="myVar">stuff</div>

使用对称（和相反）版本，如下所示：

<div [hidden]="myVar">stuff</div>

要添加到应该- 你还应该使用类似 so [acmeShown]vs just的前缀[shown]。

我使用属性指令的主要原因shown是当被隐藏的内容包含导致 XHR 往返的容器组件时，将 AngularJS 代码转换为 Angular。我不只是使用的原因[hidden]="!myVar"是它通常更复杂，例如：[hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[显示]` 更容易思考。

score 0 · Accepted Answer

Angular 文档中有两个示例https://angular.io/guide/structural-directives#why-remove-rather-than-hide

指令可以通过将其显示样式设置为无来隐藏不需要的段落。

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

您可以使用 [style.display]="'block'" 替换 ngShow 和 [style.display]="'none'" 替换 ngHide。

score 0 · Accepted Answer

0

使用[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

于 2022-02-26T00:45:55.630 回答

score 0 · Accepted Answer

你有两个选择：

第一个选项

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

第二种选择

myVarible 可以是布尔值

[hidden]="!myVarible"

score -1 · Accepted Answer

要在按钮上隐藏和显示 div，请单击角度 6。

html代码

<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
   <table>
      <tr>
         <td>Name</td>
         <td>Ram</td>
      </tr>
   </table>
</div>

AppComponent.ts 代码

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent{
   isShow=false;
   toggleElement():void
   {
      this.isShow = !this.isShow
   }
}

这对我有用，它是一种在 angular2+ 中替换 ng-hide 和 ng-show 的方法

angular - Angular 2+ 中 ngShow 和 ngHide 的等价物是什么？

21 回答 21

Related

Reference