单击Mat按钮时隐藏组件，并显示另一个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

实际上，您将click事件绑定在“ homepage.component.html”中，而click事件是在“ 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']);
}