Angolare 2: componenti che si rimuovono dal DOM

Question

Ho un componente padre con due componenti figlio (dataset-create e) in Angular2. I controlli componente padre quale dei due componente figura in qualsiasi momento utilizzando questo codice nel suo modello:

componente

<div [ngSwitch]="mode"> 
<template [ngSwitchWhen]="'create'"> 
    <dataset-create [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-create> 
</template> 
<template [ngSwitchWhen]="'detail'"> 
    <dataset-detail [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-detail> 
</template> 
</div> 

Il genitore intercetta l'evento (close) dai bambini. Quando riceve, una funzione di callback viene chiamato (onDatasetFormClose()) che ha il seguente codice:

private onDatasetFormClose() { 
    this.mode = "list"; 
} 

Questa funzione cambia il valore della variabile mode. Ciò causa il fallimento di entrambe le istruzioni ngSwitchWhen e quindi il componente figlio attualmente attivo viene distrutto.

Inoltre, Cordiali saluti, questo è come il modello di uno dei componenti figlio assomiglia:

<form novalidate="novalidate"> 
    <button type="button" (click)="onClose()">close</button> 
    <button type="submit" (click)="onSubmit()">submit</button> 
    <label for="dataFileD">data</label> 
    <input id="dataFileD" type="file" (change)="onFileChange($event)"> 
</form> 

Tuttavia, questa soluzione appare "sbagliato" per me, perché si basa sul componente principale (rendendo così è più difficile riutilizzarlo in modo indipendente).

Immagino che un altro modo per ottenere un risultato simile sarebbe quello di utilizzare un router. Questa soluzione non solo suona "troppo gonfia per non-ragione", ma soffre anche dello stesso problema della mia soluzione sopra: il componente figlio non può essere usato indipendentemente.

È possibile che un componente figlio si rimuova dal DOM? Qual è il modo corretto di gestire situazioni come questa? Forse avere componenti che si rimuovono dal DOM è una cattiva pratica di codifica Angular2?

Grazie in anticipo.

Answer 1

Penso che per un componente sia corretto richiedere un componente padre. I componenti che emettono un evento richiedono in genere un componente principale. E a volte i componenti sono più strettamente accoppiati, o sono destinati/devono essere usati insieme. Ad esempio, per implementare le schede, è probabilmente necessario un componente padre tabset, oltre ai componenti figlio tab. Ad esempio, vedere ng2-bootstrap tabs implmenentation.

Affidarsi a un componente padre potrebbe anche essere una decisione di progettazione consapevole. Ad esempio, se modelliamo la nostra applicazione utilizzando dati di applicazioni immutabili (vedere Savkin blog), potremmo impedire espressamente al nostro componente di modificare i dati dell'applicazione. Se è necessaria un'operazione di eliminazione, è possibile che venga emesso un evento per consentire a un componente di livello superiore di modificare i dati dell'applicazione (e quindi inviarlo a noi tramite una proprietà di input).

Answer 2

Perché non si dispone di una bandiera bloolean dire show sul componente secondario. Quindi basta cambiarlo in false quando è necessario. Nel modello, è sufficiente avvolgere tutto con