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

Question

我在 Angular 中完成以下情况时遇到了一些问题。

我正在使用 Angular 4，情况就是这样。

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

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

例如，如果我想更改 app.component.html 中的类，它会是这样的:

app.component - root

button-wrapper.component - holds the button

button.component - message comes from there.

通常我可以这样做:

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 中有这个:

<div [ngClass]="myClass">

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

</div>

但是，我的问题是 app-button 组件在 button-wrapper 组件内部，所以它看起来像这样:

<div [ngClass]="myClass">

    <button-wrapper></div>

</div>

那么我应该把它放在哪里:

(outputEvent)="handleEvent($event)"

我该如何解决这个问题？

Answer 1

您可以将事件与直接子级链接起来:

button.component.ts(选择器:应用按钮)

startChainEvent() {
  this.outputEvent.emit('className');
}

button-wrapper.component.html

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

button-wrapper.component.ts(选择器:app-button-wrapper)

handleEvent(e) {
  this.outputEvent.emit(e);
}

app.component.html

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

app.component.ts

handleEvent(e) {
  myClass = e;
}