Zugriff auf alle übergeordneten Komponente Funktionen von Kind Komponente

Question

Ich erstelle eine Komponente, wo ich 3 Tasten haben [ Edit, Cancel, Save ], wenn der Benutzer auf die Schaltfläche Bearbeiten klickt, Speichern und Abbrechen wird angezeigt, wenn Sie auf die Schaltfläche Speichern klicken, wird es triggert eine Funktion von der Elternkomponente.

Das Problem ist, wenn ich eine Funktion von der Eltern zu der ESC-Komponente übergeben, kann es nicht auf andere Funktionen von der übergeordneten Direktive zugreifen.

Beachten Sie die Komponente in verschiedenen Komponenten

Plunker in als globaler Betrieb verwendet werden: http://plnkr.co/edit/ZmyFjwhM6tPZXubTfeGA?p=preview&open=app%2Fapp.component.ts

Code:

<div [hidden]="isEdit"> 
     <button (click)="toggleEdit()">Edit</button> 
    </div> 
    <div [hidden]="!isEdit"> 
     <button (click)="runFunction(); toggleEdit()">Save</button> 
     <button (click)="toggleEdit()">Cancel</button> 
    </div> 

export class EscComponent { 
    @Input() run: Function; 

    runFunction() { 
     console.log('Run Function') 
     this.run() 
    } 

    isEdit = false; 

    toggleEdit() { 
     this.isEdit = !this.isEdit; 
    } 
} 

Geordnete Komponente:

Component usage: <app-esc [run]="setName"></app-esc> 


export class AppComponent { 
     name = 'Angular'; 

     setName() { 
     this.setNameCd(); 
     } 

     setNameCb() { 
     this.name = 'Angular 2 asd'; 
     } 
    } 

Answer 1

@Harry Ninh ist richtig, Sie sollten den Dekorateur @Output verwenden oder einen bestimmten Dienst erstellen. Hier ist ein Arbeits Plunker mit @output:

http://plnkr.co/edit/wadCAyW5kah0VjVR2m5B?open=app%2Fapp.component.ts&p=preview

Sie haben auch ein paar Tippfehler in Ihrem ursprünglichen Plunker, so dass Sie Ihren Code für andere Fehler überprüfen sollte.

Hier ist, wie es funktioniert:

Eltern hören auf den Ausgang

<app-esc (endEditing)="setName($event)"></app-esc> 

In geordnete Komponente, Import @Output und EventEmitter

import { Component, Input, Output, EventEmitter } from '@angular/core'; 

den Ausgang einleiten:

@Output() endEditing = new EventEmitter(); 

Emit das Ereignis in entsprechender Funktion

this.endEditing.emit();