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

ngShow和ngHide是AngularJS中的两个ng指令，分别用于显示和隐藏元素。 ngShow用于通过将div选项卡链接到脚本中的布尔变量来显示它。如果变量的值为true，则显示该项目，否则该项目保持隐藏状态，并且在ngHide情况下反之亦然。

ng-show的示例：此示例演示ngShow的工作方式。

  

    
        GeeksForGeeks
    

  

输出：

同样，如果ng-show值设置为false，则它将消失。

ng-hide的示例：此示例演示nghide的工作原理。

  

    
        
          GeeksForGeeks
      
    

  

输出：这里的输出是黑屏，因为ng-hide设置为true，这意味着GeeksForGeeks是隐藏的。同样，如果将true更改为false，则显示如下：

在Angular 2+上的实现
在angular中，有两种方法可以实现ng-hide和ng-show：

1. 通过使用[hidden]属性： angular的[hidden]属性可修改display属性，并且不会随DOM改变。它仅指示浏览器不显示内容

   句法：

   由于它不会对DOM造成任何阻碍，因此，如果在CSS中使用display属性，则此操作将失败。例如，对于上方的示例，如果执行以下操作，则[hidden]将失败。

   
   
   
       This will be hidden..
   
   
   
   
   

2. 组件类

   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() {}
   }
   

3. 输出：这在屏幕上不显示任何内容。
4. 通过使用* ngIf指令：这是[隐藏]的一种更有效的方法。它有效地从DOM中删除了内容，因此此方法存在漏洞。

   句法：

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

   例子：

   • 模板文件

     
         This will be Shown..
     
     

   • 组件类：

     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() {
       }
     }
     

   • 输出：

     This will be Shown..