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的实际组件选择器@Ouput上，而不是nav元素上：

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

Answer 2

你的处理程序是错误的元素（nav而不是app-navbar）

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

Angular @Output＆amp; EventEmitter无效

2 个答案: