Скрытие компонента по нажатию кнопки мата и отображение другого 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

как вы сказали, у вас есть матовая кнопка, которая при нажатии должна отображать домашнюю страницу

, вы можете использовать angular router

первый импорт Router

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

тогда ваш лог c должен быть

public showActions: boolean;
constructor( private router: Router ) { }
ngOnInit() { this.showActions = false; }
public toggle(): void { 
  this.showActions = !this.showActions; 
  this.router.navigate(['/home']);
}