单击 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

正如您所说，您有一个垫按钮，当您单击它时，它应该显示主页你可以使用角度路由器第一次导入 Routerimport { Router } from '@angular/router';那么你的逻辑应该是public showActions: boolean;constructor( private router: Router ) { }ngOnInit() { this.showActions = false; }public toggle(): void {&nbsp;&nbsp; this.showActions = !this.showActions;&nbsp;&nbsp; this.router.navigate(['/home']);}