如何通過Angular中另一個頁面（html）上的按鈕或鏈接的單擊事件更改div的可見性

Question

如何通過另一個頁面（html）上的按鈕或鏈接的單擊事件更改div的可見性？ 我在“main.html”頁面上有一個我想要的按鈕，當我點擊它時，它會在“header.html”中顯示一個隱藏的div。 有沒有辦法讓我這樣做？

我在index.html：

<button type="button" class="btn btn-default px-4" [routerLink]="['../home']" (click)="">Entrar</button>

在Header.html中：

            `<div class="page">
              Olá {{'usuario'}}, seja bem vindo! Hoje é dia {{today | date:'dd/MM/yyyy'}}
            </div>`

必須隱藏header.html中的div，當我單擊index.html中的按鈕時，應該顯示它。

Answer 1

一種方法是在按鈕所在的位置發出事件：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'btn-component',
    template: `<button type="button" class="btn btn-default px-4" [routerLink]="['../home']" (click)="buttonClicked()"> Entrar </button> `
})
export class ButtonComponent {
    @Output() buttonClickedEvent = new EventEmitter();
    public buttonClicked() { // You can give any function name
        this.buttonClickedEvent.emit("click!");
    }
}

然后你在'div'級別抓住它：

`<div class="page" [hidden]="!showDiv" (buttonClickedEvent)='showDiv = !showDiv'>
      Olá {{'usuario'}}, seja bem vindo! Hoje é dia {{today | date:'dd/MM/yyyy'}}
</div>`

在此處查看有關事件發射器的更多信