Angular 4 - So rufen Sie die übergeordnete Methode aus der untergeordneten Komponente ohne EventEmitter auf?

Question

Ich habe folgende Hierarchie in meiner App:

AppComponent » ThemeComponent » HeaderNavComponent 

Die ThemeComponent hat eine Methode

qrIconClicked(){ 

    } 

ich diese Methode von HeaderNavComponent aufrufen müssen.

Wie kann ich das tun?

Answer 1

Sie können tun, dass @Output Typen Variable in Ihrem Kind HeaderNavComponent Komponente und Blase und Ereignisse durch die Definition, wenn Sie fromt er Kind wollen, das von der übergeordneten Komponente aufgenommen wird ThemeComponent und Feuer einer Methode qrIconClicked()

So Ihr Kind Komponente aussehen wird

export class HeaderNavComponent { 
    @Output() editDone = new EventEmitter<EditEvent>(); 

    onSubmit() { 
    if (some condition) { 
     this.editDone.emit('some value'); 
    } else { 
     this.editDone.emit('other value'); 
    } 
    } 
} 

wie Sie editDone Ereignis von Ihrem Kind Komponente erhöhen, während Ihr Kind Komponente ruft Sie eine Funktion zuweisen können anrufen, wenn das Ereignis wird emmitted werden.

<header-nav(editDone)="qrIconClicked($event)"><header-nav> 

Und schließlich arbeiten Sie Wert von Kind im Falle Eltern übergeben bekommen

qrIconClicked(event: any){ 
    //event will hold value from chilld 
    }