Wie die saubere Arbeit des Kindes in der Elternkomponente

Question

Ich habe eine parent und eine child Komponente. Die Komponente parent ist eigentlich eine Seite. Die child Komponente möchte einige saubere Arbeit im Zusammenhang mit der Datenbank tun.

Wenn ich die parent Seite/Komponente schließe. Was ich vermute ist

child ngOnDestroy ->child cleanWork ->parent ngOnDestroy.

Die tatsächliche ist

child ngOnDestroy ->parent ngOnDestroy.

// Mutter

@Component({ 
    selector: 'parent', 
    template: ` 
    <child 
    (cleanWork)="onCleanWork()"> 
    </child> 
    ` 
}) 
export class ParentComponent { 
    ngOnDestroy() { 
    console.log('parent ngOnDestroy'); 
    } 

    onCleanWork() { 
    console.log('child cleanWork'); 
    // dispatch an action, or do something with database 
    } 
} 

// Kind

@Component({ 
    selector: 'child', 
    template: `Hi` 
}) 
export class ChildComponent { 
    @Output() cleanWork = new EventEmitter(); 

    ngOnDestroy() { 
    console.log('child ngOnDestroy'); 
    this.cleanWork.emit(null); 
    } 
} 

Der Grund, warum ich im Inneren des Kindes die saubere Arbeit mache, ist, weil ich das Kind sein wollen stumm . Gibt es einen alternativen/besseren Weg?

Dank

Answer 1

Ich bekam Hilfe von Brandt B. @babeal auf Gitter.

Da ich ngrx/store verwende, sollte ich alle datenbankbezogenen Aktionen in der übergeordneten Smart-Komponente statt emit in untergeordnete Komponente zuerst, dann eine Aktion im übergeordneten tun.

In diesem Fall sollte ich die saubere Arbeit in Elternkomponente direkt tun.

Presentational and Container Components wird dazu beitragen, zu verstehen.

Answer 2

Ich würde einen Verweis auf eine child von parent erstellen:

@ViewChild(ChildComponent) child: ChildComponent; 

Und dann rufen Sie aus parent Routing bereinigen, wenn es benötigt wird (Ihr ngOnDestroy)

ngOnDestroy() { 
    child.cleanup(); 
}