Query Angular 8 DOM: ViewChild e ViewChildren Esempio

Blog

I decoratori @ViewChild e @ViewChildren in Angular forniscono un modo per accedere e manipolare elementi, direttive e componenti DOM...



In questo tutorial, vedremo un esempio di Angular 8 su come utilizzare i due decoratori.

Puoi usare |_+_| se hai bisogno di interrogare un elemento dal DOM e |_+_| per più elementi.



Useremo un IDE di sviluppo online disponibile da https://stackblitz.com/ quindi non è necessario configurare la macchina di sviluppo locale per Angular a questo punto.

Vai su Stackblitz, accedi con il tuo account GitHub e scegli uno spazio di lavoro Angular:



l'hanno letto?

Dovresti essere presentato con un IDE online con un progetto Angular 8:

Il nostro progetto Angular contiene il solito |_+_| componente e un componente figlio chiamato |_+_| e definito nel |_+_| file con il seguente codice:

ViewChild

Il componente accetta un |_+_| proprietà e utilizza un modello in linea che visualizza semplicemente il valore passato tramite la proprietà name dal componente padre.

Nel decoratore di componenti, abbiamo usato Ciao come selettore per il componente quindi nel template HTML del |_+_| componente definito nel |_+_| file, includiamo il componente figlio utilizzando il seguente codice:

ViewChildren

Dopo aver eseguito la nostra applicazione Angular, viene eseguito il rendering del componente hello e diventa parte del DOM in modo che possiamo interrogarlo proprio come qualsiasi normale elemento DOM.

Che cos'è ViewChild in Angular?

ViewChild è un decoratore che crea una vista o una query DOM. Secondo il documenti

installa python su linux mint

Decoratore di proprietà che configura una query di visualizzazione. Il rilevatore di modifiche cerca il primo elemento o la direttiva corrispondente al selettore nella vista DOM. Se il DOM della vista cambia e un nuovo figlio corrisponde al selettore, la proprietà viene aggiornata.
Il decoratore prende le seguenti meta informazioni:

  • |_+_| - il selettore dell'elemento da interrogare. Può essere un tipo di direttiva o un nome.
  • |_+_| - leggere un token diverso dagli elementi interrogati.
  • |_+_| - Questa è una novità in Angular 8 e indica se risolvere o meno i risultati della query prima dell'esecuzione del rilevamento delle modifiche.

|_+_| può assumere i seguenti selettori:

  • Classi con |_+_| oppure |_+_| decoratori ovvero componenti e direttive,
  • Variabili di riferimento del modello,
  • fornitori,
  • App

Ora torniamo al nostro |_+_| file e vediamo come possiamo interrogare il componente figlio usando |_+_|. Innanzitutto, modifica il codice di conseguenza:

HelloComponent

Nella console, dovresti ottenere Ciao angolare :

Ora spieghiamo il codice.

Per prima cosa, abbiamo importato |_+_| e |_+_| e |_+_| dal |_+_|pacchetto:

src/app/hello.component.ts

Successivamente, creiamo una query chiamata |_+_| che prende |_+_| come selettore e ha static uguale a false:

import { Component, Input } from '@angular/core'; @Component({ selector: 'hello', template: `# Hello ! `, styles: [`h1 { font-family: Lato; }`] }) export class HelloComponent { @Input() name: string; }

In Angular 8, tempismo per |_+_| e |_+_| deve essere specificato esplicitamente.

Vedi: ​ Perché devo specificare name ? Non è l'impostazione predefinita?

Successivamente, nel |_+_| hook del ciclo di vita, possiamo usare la query per accedere all'elemento DOM per il componente hello. Nel nostro esempio, abbiamo avuto accesso alla proprietà name del componente, dopo che è stato montato nel DOM, che contiene il Angolare corda:

App

Possiamo accedere a qualsiasi proprietà e persino ai metodi dal componente interrogato.

Nota *: le query di visualizzazione sono impostate prima del src/app/app.component.html viene chiamata la richiamata.*## Interrogazione di elementi HTML standard con riferimenti a modelli

Possiamo anche interrogare elementi HTML standard usando |_+_| e variabili di riferimento del modello. Torniamo al nostro |_+_| file e modificarlo come segue:

Start editing to see some magic happen :)

Abbiamo semplicemente aggiunto |_+_| riferimento del modello al nostro componente Hello. Ora cambiamo il nostro codice per accedere al componente usando il suo riferimento. Torna al |_+_| file e modificare di conseguenza:

selector

Importiamo |_+_| e creiamo una configurazione di query per accedere all'elemento `````` DOM con |_+_| riferimento del modello come segue:

read

Successivamente, nel |_+_| possiamo accedere e modificare l'elemento DOM nativo usando |_+_| oggetto di |_+_|:

static

Questo è l'esempio dal vivo di questo collegamento .

Che cos'è ViewChildren in Angular?

|_+_| è un altro decoratore di proprietà che viene utilizzato per interrogare il DOM per più elementi e restituire a Elenco query .

Secondo il documenti :

Puoi usare ViewChildren per ottenere la QueryList di elementi o direttive dalla vista DOM. Ogni volta che un elemento figlio viene aggiunto, rimosso o spostato, l'elenco delle query verrà aggiornato e le modifiche osservabili dell'elenco delle query emetteranno un nuovo valore.
Vediamo un esempio.

Vai a |_+_| file e aggiornalo come segue:

distribuire l'app angolare sul server Web Apache
ViewChild

Stiamo semplicemente ripetendo il componente ciao tre volte. Ora interroghiamo il DOM. Apri il |_+_| file e modificarlo come segue:

app di ricerca del numero vocale di google
@Component

Dovresti questo output nella console:

Ora spieghiamo il codice.

Per prima cosa importiamo |_+_|, |_+_| e |_+_| da |_+_| pacchetto.

Successivamente, creiamo una configurazione vquery per accedere a più elementi DOM:

@Directive

|_+_| restituisce un |_+_| che memorizza un elenco di elementi. Quando lo stato cambia, Angular aggiornerà automaticamente questo elenco di query.

Infine, nel |_+_| metodo, possiamo scorrere l'elenco delle query e registrare ogni elemento DOM:

TemplateRef

Puoi trovare l'esempio dal vivo da questo collegamento .

Conclusioni

In questo tutorial, abbiamo visto come possiamo accedere e modificare il DOM in Angular 8 usando |_+_| e |_+_| decoratori e un paio di altre API come |_+_| e |_+_|

#angular #web-development

www.techiediaries.com

Query Angular 8 DOM: ViewChild e ViewChildren Esempio

I decoratori @ViewChild e @ViewChildren in Angular forniscono un modo per accedere e manipolare elementi, direttive e componenti DOM...