Angular 2: Wie Funktion in Kind-Komponente übergeben

Question

In einer Angular 2 App, sage ich eine 'SaveComponent', wo klicken Sie auf die Schaltfläche Speichern ruft eine Funktion isDirty(), die wahr oder falsch (wahr, wenn der Inhalt der übergeordneten Komponente hat) geändert worden). Beachten Sie, dass der Grund für die "SaveComponent" darin besteht, dass ihm Stile und andere "Widgets" zugeordnet sind, die von vielen Komponenten gemeinsam genutzt werden.

derzeit gibt es eine isDirty Funktion in jeder der übergeordneten Komponenten definiert, und die Funktion SaveComponent übergeben wird, wie in der Vorlage Mutter folgt:

<save-component [isDirty]="isDirty"> </save-component> 

, wenn Sie sehen kümmern, eine vereinfachte Version von SaveComponent so etwas wie dieses definiert ist ...

import {Component, Input} from 'angular2/core'; 

@Component({ 
    selector: 'save-component', 
    templateUrl: 'who-cares-to-know.component.html' 
}) 

export class SaveComponent { 
    @Input() isDirty; 
} 

Es funktioniert nur zunächst. Es scheint, dass die Funktion isDirty nur false zurückgibt (oder nur einmal aufgerufen?), Auch wenn der Inhalt geändert wird. Beachten Sie, dass die Funktion ordnungsgemäß funktioniert, wenn sie von der übergeordneten Komponente aufgerufen wird.

Was ist los? Ist es möglich, die Funktion von Eltern zu Kind über @Input oder andere Mittel zu übergeben? Vielen Dank!

Answer 1

Das Problem ist, dass Sie den Kontext Ihrer Methode verlieren, wenn Sie darauf verweisen, also das Schlüsselwort "this".

würde ich so etwas verwenden:

getIsDirty() { 
    return() => { 
    return this.isDirty(); 
    } 
} 

Mit der Pfeilfunktion können Sie die lexikalisch diese verwenden. Letzteres entspricht der Komponenteninstanz selbst.

Und liefern sie an die Unterkomponente auf diese Weise:

<save-component [isDirty]="getIsDirty()"> </save-component>