Angular 2+中的ngShow和ngHide等效于什么？

在某些条件下，我希望看到一些元素。

在AngularJS中，我会写

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

如何在Angular 2+中做到这一点？

只需绑定到hidden属性

[hidden]="!myVar"

也可以看看

• https://developer.mozilla.org/zh-CN/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或删除属性才会使该元素可见。

使用{{}}还会将表达式转换为字符串，将无法正常工作。

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

*ngIf 与 [hidden]

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

使用[hidden]属性：

[hidden]="!myVar"

或者你可以使用 *ngIf

*ngIf="myVar"

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

我发现自己处在相同的情况下，与我遇到的情况不同的是，元素是flex容器。

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

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

[class.is-loading]="isLoading"

那么CSS很简单

&.is-loading { display: none } 

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

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

display: flex;

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

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

如果您的情况是样式不显示，您还可以使用ngStyle指令并直接修改显示，我这样做是为了将Bootdrop 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";
}

根据ngShow和ngHide的 Angular 1文档，这两个指令都根据该指令的条件将css style添加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 !之前添加（而不是），对于Angular2中的hide行为，我们不需要在ngHideVal !之前添加（不）。

<div [hidden]="myExpression">

myExpression可以设置为true或false

如果您使用的是Bootstrap，就这么简单：

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

在bootstrap 4.0中，类“ d-none” =“显示：无！重要；

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

对于在此问题上绊脚石的其他人来说，这就是我做到的方式。

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>

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

HTML：

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

CSS：

[hidden] {
   display: none;
}

这对我有用：

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

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

对我来说，[hidden]=!var从来没有奏效。

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

并且， <div *ngIf="expression">始终给出正确的结果。

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

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

<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。

使用来解决此问题的最佳方法ngIf 因为这很好地阻止了该元素在前端呈现，

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

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

并且如果您有多个元素（还需要实现其他元素），则可以使用Use <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-template代码

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

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>

要在添加到应有水平 -你要跟也应该像我们这样的前缀[acmeShown]VS公正[shown]。

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

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

HTML代码

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

组件.ts代码

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

这对我有效，并且是在angular6中替换ng-hide和ng-show的方法。

请享用...

谢谢