如何通过另一个页面（html）中的按钮或链接的单击事件更改div的可见性

如何通过另一个页面（html）上的按钮或链接的单击事件更改div的可见性？我在“main.html”页面上有一个我想要的按钮，当我点击它时，它会在“header.html”中显示一个隐藏的div。我有办法做到这一点吗

我在index.html中有：

entra

在Header.html中：

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

`
Olá{'usuario'}，seja bem vindo！Hojeédia{今天|日期：'dd/MM/yyyy'}
`

---

header.html中的div必须隐藏，当我单击index.html中的按钮时，它应该显示出来。

一种方法是在按钮所在的位置发出事件：

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!");
    }
}

从'@angular/core'导入{Component，EventEmitter，Output}；
@组成部分({
选择器：“btn组件”，
模板：`entra`
})
导出类按钮组件{
@Output（）按钮ClickedEvent=新的EventEmitter（）；
public buttonClicked（）{//您可以给出任何函数名
这个.buttonClickedEvent.emit（“单击！”）；
}
}

然后在“div”级别捕捉它：

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

`
Olá{'usuario'}，seja bem vindo！Hojeédia{今天|日期：'dd/MM/yyyy'}
`

---

查看有关事件发射器的更多信息

您可以发布一些代码吗？如果我们能够知道如何在主组件中调用header组件，这会有所帮助。如果主组件是父组件，您可以使用EventEmitter来实现这一点。例如，您可以使用

@EventEmitter

或

Subject

让两个组件进行通信。这里有一个简单的stackblitz，我按照他的建议做了。我创建了一个button.component，在app.module中导入它，并在屏幕上使用它。它出现在Enter按钮上，当我单击它时，它会调用主页，但是我不能使div显示为隐藏，而在我单击Enter时显示。