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

📅  最后修改于: 2021-05-13 19:09:12             🧑  作者: Mango

先决条件:必须安装Angular

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

  • 让我们从创建一个新项目开始。创建一个新文件夹并初始化一个新的角度项目。运行项目以验证它是否正常运行。
ng new myProject
ng serve -o  
  • 这将在当前目录中创建一个新项目。现在,我们可以清除app.component.html文件并创建一个子组件,以演示如何显示或隐藏它。
ng generate component comp1  
  • 现在设置部分结束了。让我们在app.component.html文件中添加以下组件:
  
  • 我们将创建一个按钮来显示和隐藏组件。让我们在app.component.html文件中添加按钮代码。
  
  • 在这里,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
   This is the Child Component


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";
 }
}


app.component.html
      


  • 我们的子组件仍为空白,因此让我们添加一些内容。转到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

      

  • 现在保存所有文件并使用以下命令运行项目:
ng serve -o  

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

单击“显示”按钮时

单击“隐藏”按钮时