单击 mat-button 隐藏一个组件并显示其他一个 Angular 9

Question

我需要在我的 Angular 9 应用程序中有一个介绍页面。我有一个mat-button，当我单击它时，我需要显示主页，其中将显示主导航和其他内容。到目前为止我尝试过的是在我的 app.component.html 中<app-main-nav *ngIf="!showActions"></app-main-nav><app-bgphotos ></app-bgphotos><router-outlet></router-outlet>在我的app.component.ts中public showActions: boolean;constructor() { }ngOnInit() { this.showActions = false; }public toggle(): void { this.showActions = !this.showActions; }在我的 homepage.component.html 中<div class="bgpageland"><div class="wlctext"><p>Welcome</p><p>serv</p><button type="button" (click)="toggle()">Intro</button>没有任何反应，两个组件都被显示见下图https://i.stack.imgur.com/mC5hS.jpg

Answer 1

实际上，您在“homepage.component.html”中绑定了单击事件，并且单击事件在“app.component.ts”中定义。如果您想从 clild 组件调用父组件中的函数，您应该使用 EventEmitter 并使用 @Output 绑定到“homepage.component.html”。

Answer 2

正如您所说，您有一个垫按钮，当您单击它时，它应该显示主页

你可以使用角度路由器

第一次导入 Router

import { Router } from '@angular/router';

那么你的逻辑应该是

public showActions: boolean;

constructor( private router: Router ) { }

ngOnInit() { this.showActions = false; }

public toggle(): void { 

  this.showActions = !this.showActions; 

  this.router.navigate(['/home']);

}