Angular @Output&EventEmitter不工作

Question

我试图将show我的导航栏组件的值传递给我的应用程序根组件,我用它来形成应用程序的基本布局.在navbar-component.ts我有这个:

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {

    public show = true;
    @Output() showEvent = new EventEmitter<boolean>();

    constructor() { }

    sendToggle() {
        if (this.show === true) {
            this.show = false;
        } else {
            this.show = true;
        }
        this.showEvent.emit(this.show);
    }

}

然后在模板中我有这个:

<button type="button" class="btn btn-transparent ml-2 mr-auto"
    (click)="sendToggle()">
    <span class="fa fa-bars"></span>{{ show }}
</button>

我添加的{{ show }}只是为了让我可以看到show每种sendToggle()方法的变化状态.

然后我设置app-component.ts像这样来听取事件:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent {

    public show: boolean;

    getToggle($event) {
        this.show = $event;
    }

}

然后在模板上我有这个:

<app-navbar></app-navbar>
<div id="wrapper">
    <nav (showEvent)="getToggle($event)" id="sidebar" [ngClass]="{show: show}">
        {{ show }}
        <app-sidebar></app-sidebar>
    </nav>
    <div id="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
    </div>
</div>

因此,当我单击按钮时,我可以看到show导航栏组件中的更改状态,但是应用程序组件似乎没有收到消息.我到底做错了什么？

Answer 1

您应该将showEvent实际的组件选择器放在app-navbar具有@Output,而不是nav元素的实际组件选择器上:

<app-navbar (showEvent)="getToggle($event)"></app-navbar>