Parte 2: caricamento dei nodi salvati

Benvenuti alla seconda e ultima puntata di questa serie di tutorial sullo sviluppo web su Elaborazione ricorsiva dei nodi dell’albero. Nella prima parte, abbiamo scritto il codice per salvare le selezioni del produttore, del modello e del livello del veicolo dal file Nodo Veicolo albero. L’operazione di salvataggio ha comportato la creazione di un albero semplificato riducendolo ai nodi selezionati. Nel follow-up di oggi, aggiungeremo l’altra metà della funzionalità alla nostra app demo per applicare le selezioni salvate al matTree controllo. Questo esercizio richiederà di abbinare gli ID salvati a quelli nel file DATI_ALBERO per selezionare programmaticamente i nodi salvati.

Se ti sei perso la prima parte di questo tutorial di Angular o hai bisogno di un aggiornamento, ti suggeriamo di leggere: Elaborazione ricorsiva dei nodi dell’albero in angolare.

Invocando il metodo loadSelection()

Ricordiamo che, nel applicazione demole selezioni dei veicoli vengono mantenute e richiamate da un elenco di collegamenti, che può essere visualizzato sopra il MatTree controllo:

Facendo clic su un collegamento si richiama il loadSelection() metodo, piuttosto che passare a un’altra pagina, come fanno la maggior parte dei collegamenti. Ci sono alcuni sviluppatori web noiosi che ammoniscono coloro che oseranno utilizzare i collegamenti per attivare azioni piuttosto che la navigazione. A loro dico pshaw!

Il trucco è impostare il href attribuire a “javascript:void(0)” e poi leghiamo il nostro metodo al clic gestore. Gli passeremo l’indice dell’array in modo da sapere quale selezione è stata cliccata:

<div class="saved-selections">Load selection:<br/> 
  <ul>
  <li *ngFor="let savedSelection of savedSelections; let i=index">
      <a role="button" href="https://www.htmlgoodies.com/javascript/loading-nodes-angular/javascript:void(0)" (click)="loadSelection(i)">{{savedSelection.name}}</a><br/>
  </li>
</ul>
</div>

Leggere: Filtra i nodi DOM usando un Tree Walker

Cancellazione della selezione corrente con deselctAllNodes()

Prima di caricare una precedente configurazione di nodi selezionati, dobbiamo prima deselezionare tutti i nodi che sono già selezionati. Altrimenti, ci ritroveremmo con selezioni extra. Questa responsabilità viene trasferita al ricorsivo deselectAllNodes() metodo. Come abbiamo visto nella prima parte, dobbiamo invocare il metodo ricorsivo all’interno di un ciclo che itera su ogni nodo radice, poiché ognuno di questi rappresenta un albero separato:

public loadSelection(index: number) {
  this.deselectAllNodes(this.dataSource.data);

  // Toggle the selected nodes...
}

Il deselectAllNodes() il metodo prende di mira tutti i nodi selezionati e indeterminati e li disattiva. Quindi fa lo stesso per i figli di ogni nodo:

private deselectAllNodes(vehicleNodes: VehicleNode[]) {
  vehicleNodes.forEach(node => {
    if(node.selected) {
      node.selected = false;
    }
    if (node.children) {
      if(node.indeterminate) {
        node.indeterminate = false;
      }
      this.deselectAllNodes(node.children);
    }
  });
}

Una volta che tutti i nodi sono stati deselezionati, le selezioni salvate vengono recuperate dall’indice e il toggleSelectedNodes() il metodo va a lavorare sull’attivazione dei nodi nel file MatTree in base agli ID memorizzati nel file Selezioni salvate’ selezioni attributo:

public loadSelection(index: number) {
  this.dataSource.data.forEach(node => {
    this.deselectAllNodes(node);
  });
  const savedSelections = this.savedSelections[index];
  this.toggleSelectedNodes(
    savedSelections.selections, 
    this.dataSource.data
  );
}

Come prevedibile, toggleSelectedNodes() elabora anche i nodi in modo ricorsivo. Poiché le selezioni memorizzano il nodo ID fino in fondo a ciascun ramo dell’albero necessario per identificare i nodi selezionati, toggleSelectedNodes() deve anche seguire ogni ramo fino a quando non ci sono più figli. Questo diventa evidente quando esaminiamo un esempio Selezione salvata oggetto:

{
  name: "Infiniti Selections",
  selections: [{
    id: "infiniti",
    children: [
      {
        id: "g50",
        children: [ { id: 2 } ]
      },
      { id: "qx50" }
    ]
  }]
}

Il primo passo è abbinare il memorizzato ID con quello di a Nodo Veicolo. Se entrambi i selezione del veicolo e veicoloNode hanno figli, il metodo viene nuovamente applicato ai figli di ogni oggetto. Una volta raggiunto il nodo foglia del selezione del veicoloè ora di chiamare itemToggle() sul corrispondente veicoloNode. La cosa grandiosa di questo approccio è che itemToggle() si occuperà di selezionare per noi tutti gli antenati del nodo! Se qualsiasi parte del Nodi Veicolo l’oggetto non corrisponde a quello salvato Selezioni di veicoliviene emesso un avviso sulla console mentre il metodo procede con l’analisi rimanente Selezioni di veicoli:

private toggleSelectedNodes(
  vehicleSelections: VehicleSelection[],
  vehicleNodes: VehicleNode[]
) {
  vehicleSelections.forEach(selection => {
    const vehicleNode = vehicleNodes.find(
      vehicleNode => vehicleNode.id === selection.id
    );
    if (vehicleNode) {
      if (selection.children) {
        if (vehicleNode.children) {
          this.toggleSelectedNodes(
            selection.children, 
            vehicleNode.children
          );
        } else {
          console.warn(`Node with id '${vehicleNode.id}' has no children.`)
        }
      } else {
        this.itemToggle(true, vehicleNode);
      }
    } else {
      console.warn(`Couldn't find vehicle node with id '${selection.id}'`)
    }
  });
}

Ecco l’aggiornamento demo che include la nuova funzionalità di caricamento della selezione.

Conclusione

E questo ci porta alla fine di questa serie in due parti. Nella prima puntata, abbiamo trattato la struttura di base della funzione ricorsiva, quindi l’abbiamo utilizzata per rendere persistente l’array di VehicleNodes introdotto nel Tracciamento delle selezioni con caselle di controllo in angolare articolo di dicembre. In questo articolo, abbiamo ricostituito l’originale Nodi Veicolo albero dalle selezioni salvate.

Per saperne di più Tutorial di sviluppo web angolare.