在Angular 10中显示或隐藏子级组件

先决条件：必须安装Angular

在本文中，我们将看到如何在Angular中显示或隐藏子组件。

• 让我们从创建一个新项目开始。创建一个新文件夹并初始化一个新的角度项目。运行项目以验证它是否正常运行。

ng new myProject
ng serve -o  

• 这将在当前目录中创建一个新项目。现在，我们可以清除app.component.html文件并创建一个子组件，以演示如何显示或隐藏它。

ng generate component comp1  

• 现在设置部分结束了。让我们在app.component.html文件中添加以下组件：

• 我们将创建一个按钮来显示和隐藏组件。让我们在app.component.html文件中添加按钮代码。

    {{buttonTitle}}
  

• 在这里，showhideUtility()是一个方法，而buttonTitle是一个需要在app.component.ts文件中定义的变量。

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
   export class AppComponent {
   title = 'myProject';
   buttonTitle:string = "Hide";
   showhideUtility(){
   }
}

• 我们的子组件仍为空白，因此让我们添加一些内容。转到comp1.component.html并添加以下代码：

comp1.component.html

   This is the Child Component

• 并在comp1.component.css中添加一些css以获得漂亮的视图：

div{
height:200px;
width: 200px;
border: 2px lightblue solid;
border-radius: 10px;
background-color: lightgreen;
}

• 现在回到app.component.ts，添加一个新属性“ visible”，该属性将是一个布尔变量，用于定义显示/隐藏状态。当用户触发show hide方法时，它应该翻转“ visible”变量的值。因此，最终我们的app.component.ts将如下所示：

app.component.ts

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'myProject';
 buttonTitle:string = "Hide";
 visible:boolean = true;
 showhideUtility(){
   this.visible = this.visible?false:true;
   this.buttonTitle = this.visible?"Hide":"Show";
 }
}

• 将ngIf指令添加到comp1以显示或隐藏该组件。所以最终app.component.html看起来像这样：

app.component.html

      
{{buttonTitle}}

• 现在保存所有文件并使用以下命令运行项目：

ng serve -o  

默认情况下，该项目将在http：// localhost：4200上运行。您将得到如下输出：

单击“显示”按钮时

单击“隐藏”按钮时