Angular 2+中ngShow和ngHide的对应关系是什么

ngShow和ngHide是AngularJS中的两个ng指令，分别用于显示和隐藏元素。如果该变量的值为真，那么该项目将被显示，否则该项目将被隐藏，反之亦然。

ng-show的例子。这个例子演示了ngShow是如何工作的。

<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
  
<body ng-app="">
    <div ng-show="true">
        <h1 style="color:green;">GeeksForGeeks</h1>
    </div>
</body>
  
</html>

输出:
Angular 2+中ngShow和ngHide的对应关系是什么？

同样，如果ng-show值设置为false，那么它就会消失。

ng-hide的例子。这个例子演示了ng-hide是如何工作的。

<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
  
<body ng-app="">
    <div ng-hide="true">
        <h1 style="color:green;">
          GeeksForGeeks
      </h1>
    </div>
</body>
  
</html>

输出。这里的输出是一个黑屏，因为ng-hide被设置为true，这意味着GeeksForGeeks被隐藏。同样地，如果将true改为false，则会出现如下情况。
Angular 2+中ngShow和ngHide的对应关系是什么？

在Angular 2+上实现
在angular中，有两种方法来实现ng-hide和ng-show。

1.通过使用”[hidden]”属性。angular中的”[hidden]”属性，修改了显示属性，并没有改变DOM。它只是指示浏览器不显示该内容。

语法:

<div [hidden]="boolean_var"></div>

由于它不会对DOM造成任何阻碍，因此，如果在CSS中使用显示属性，那么这将会失败。例如，在上面的例子中，如果按照下面的方法，[hidden]将会失败。

<div [hidden]="boolean_var" style="display:block; ></div>

hidden属性的RHS侧由组件类中的布尔变量的名称组成。该变量的值决定了”[hidden]”是否会隐藏。

示例:

模板文件

<div [hidden]="isHidden">
    This will be hidden..
</div>

组件类

import {
    Component,
    OnInit
}
  
from '@angular/core';
@Component( {
    selector: 'app-list', templateUrl: 
      './list.component.html', styleUrls:
      ['./list.component.css']
}
  
) export class ListComponent implements OnInit {
    isHidden: boolean=true;
    constructor() {}
    ngOnInit() {}
}

输出。这在屏幕上不显示任何东西。
2.通过使用 “*ngIf “指令。这是一个比[hidden]更有效的方法。它能有效地将内容从DOM中移除，因此这种方法存在漏洞。

语法:

<div *ngIf="boolean_var"></div>

与[hidden]属性类似，该属性的RHS侧由组件类中的布尔变量的名称组成。该变量的值决定了该内容是否在DOM中。

示例:

模板文件

<div *ngIf="isShown">
    This will be Shown..
</div>

组件类。

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  
isShown:boolean=true;
  constructor() { }
    
  ngOnInit() {
  }
}