Question

如何通过另一个页面（html）上的按钮或链接的click事件来更改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>`

详细了解事件发射器crypto-js on github

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

1 个答案: