Javascript Angular 4通过多层组件使用eventEmitter

我有一个小问题，在完成以下情况下，在角度

我用的是角度4，这就是情况

app.component.html包含一个包装器div，我希望能够通过向它添加一个类来更改它的颜色

我的问题是我有不同层次的组件

例如，如果我想更改app.component.html中的类，它将具有以下内容：

app.component - root

button-wrapper.component - holds the button

button.component - message comes from there.

<div [ngClass]="myClass">

  <app-button (outputEvent)="handleEvent($event)"></app-button>

</div>

通常我可以这样做：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  myClass = '';

  handleEvent(value) {
    console.log(value);
    myClass = value;
  }
}

在app.component.html中，有以下内容：

app.component - root

button-wrapper.component - holds the button

button.component - message comes from there.

<div [ngClass]="myClass">

  <app-button (outputEvent)="handleEvent($event)"></app-button>

</div>

---

我如何处理这个问题？

您可以将事件链接到直接子事件：

按钮.component.ts（选择器：应用程序按钮）

按钮包装器.component.html

<app-button (outputEvent)="handleEvent($event)"></app-button>

<app-button-wrapper (outputEvent)="handleEvent($event)"></app-button-wrapper>

app.component.html

<app-button (outputEvent)="handleEvent($event)"></app-button>

<app-button-wrapper (outputEvent)="handleEvent($event)"></app-button-wrapper>

---

按钮包装器

位于

AppComponent

内部。要在多个“层”之间使用父子通信，每个层必须输入/输出到父层或子层。或者，您可以使用“共享服务”在非父/子层的层之间进行通信，如下所述：

handleEvent(e) {
  myClass = e;
}