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

在我的主页.component.html

<div class="bgpageland">
<div class="wlctext">
<p>Welcome</p>
<p>serv</p>

<button type="button" (click)="toggle()">Intro</button>

两个组件都没有显示

见下图

谢谢你

Answer 1

实际上，您将点击事件绑定在“homepage.component.html”中，并且点击事件在“app.component.ts”中定义。 如果要从 clild 组件调用父组件中的 function，则应使用 EventEmitter 并使用 @Output 绑定到“homepage.component.html”。

Answer 2

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

你可以使用angular路由器

首先导入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']);
}