Übergeben von Daten von der untergeordneten Komponente an die übergeordnete Komponente

Question

Ich versuche, Warnungen von meinen untergeordneten Komponenten an die übergeordnete Komponente zu übergeben.

Ich habe folgende app Komponente:

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 

App.component.html:

<header> 
Some header 
</header> 
<clr-alert [clrAlertType]="'alert-warning'" [clrAlertAppLevel]="true"> 
    <div class="alert-item"> 
     <span class="alert-text"> 
      {{My_Alert_value_that_I want to pass from child}} 
     </span> 
     <div class="alert-actions"> 
      <button class="btn alert-action">Fix</button> 
     </div> 
    </div> 
</clr-alert> 
<router-outlet></router-outlet> 

My Child Komponente:

@Component({ 
    styleUrls: ['./child.component.scss'], 
    templateUrl: './child.component.html', 
}) 
export class ChildComponent { 
    alerts: string 
    constructor(){ 
    this.alerts = ""; 
    } 

    this.alert = "My alerts, which I want to show on the app.component.html" 
} 

Kann jemand mir bitte hier helfen?

Answer 1

Sie können Daten vom untergeordneten Element dem übergeordneten Element bereitstellen, indem Sie das EventEmitter verwenden und das Ereignis in der übergeordneten Komponente verarbeiten.

Die offizielle Dokumentation haben ein wirklich gutes Beispiel EventEmitter der Verwendung:

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html