Javascript Angular 4 mit eventEmitter obwohl mehrere Schichten von Komponenten

Question

Ich habe ein bisschen ein Problem mit der folgenden Situation in Angular.

Ich benutze Angular 4 und das ist die Situation.

app.component.html enthält ein Wrapper div, das ich in der Lage sein möchte, seine Farbe durch Hinzufügen einer Klasse zu ändern.

Mein Problem ist, dass ich verschiedene Schichten von Komponenten habe.

Zum Beispiel, wenn ich die Klasse in app.component.html ändern wollte wäre es diese:

app.component - root 

button-wrapper.component - holds the button 

button.component - message comes from there. 

Normalerweise dies könnte ich tun:

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; 
    } 
} 

und in app.component .html diese:

<div [ngClass]="myClass"> 

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

</div> 

ABER, ist mein Problem, dass App-Button-Komponente ist innerhalb Knopf Wrapper-Komponente so i t sieht wie folgt aus:

<div [ngClass]="myClass"> 

    <button-wrapper></div> 

</div> 

Wo würde ich habe dies:

(outputEvent)="handleEvent($event)" 

Wie kann ich um dieses Problem zu gehen?

Answer 1

Sie können Kette Ereignisse, solange ihre direkte Kinder:

button.component.ts (Selektor: app-Taste)

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

Knopf wrapper.component.html

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

button-wrapper.component.ts (selector: 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; 
}