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

没有任何反应，两个组件都在显示

见下图

谢谢

Answer 1

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