|
|
Pubblicato su 25/10/2018 15:52:29
|
|
|
Introduzione ai comandi RouterLink
Il comando RouterLink ti permette di collegarti a una parte specifica della tua applicazione. Se il collegamento è statico, possiamo usare il comando nel modo seguente:
Se devi generare indirizzi di link con valori dinamici, puoi passare un array di segmenti di percorso e poi i parametri per ciascun segmento. Ad esempio, usare un array di ['/team', teamId, 'user', userName, {details: true}] significa che vogliamo generare un link a /team/11/user/bob; dettagli=true 。
Più segmenti statici possono essere uniti in uno solo, ad esempio ['/team/11/user', userName, {details: true}].
Il primo frammento di cammino può essere definito come /, ./ o . / Inizio:
- Se inizia con /, la rotta inizierà a guardare verso l'alto rispetto alla rotta radice
- Se inizia con ./ o non viene utilizzato, la route inizierà a cercare verso l'alto rispetto alla route figlia attualmente attiva per la route
- Se inizi con: / inizia, il percorso passa al livello successivo di ricerca
Puoi impostare parametri di query e frammenti nei seguenti modi:
Il comando RouterLink genererà il seguente link basandosi sui parametri di input imposti sopra: /user/bob#education?debug=true. Inoltre, possiamo dichiarare come gestire i parametri di query tramite la proprietà queryParamsHanding; le opzioni disponibili sono:
- merge - Unisci i queryParams esistenti con i query Params attuali
- preserve - Salva i query Params correnti
- predefinito ('') - Usa solo i parametri di query
Esempi specifici di utilizzo sono i seguenti:
Comando RouterLink spiegato in dettaglio
Definizione del comando RouterLink
Proprietà di input dei comandi RouterLink
Imposta i parametri di query relativi all'URL
@Input() queryParams: {[k: string]: any};
Imposta il frammento hash sull'URL
frammento @Input(): stringa;
Imposta la modalità di elaborazione dei parametri di query: merge, preserva e predefinito
@Input() queryParamsHandling: QueryParamsHandling;
Insiemi se mantenere i frammenti
@Input() preserveFrammento: boolean;
Quando si imposta la navigazione della pagina, se aggiungere nuovi stati alla cronologia
@Input() skiplocatio{filter}nChange: boolean;
Durante l'impostazione della navigazione della pagina, se sostituire lo stato attuale nella cronologia
@Input() replaceUrl: boolean;
Imposta le informazioni sui parametri dei comandi, ad esempio: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
if (comandi != null) {
this.commands = Array.isArray(comandi) ? comandi: [comandi];
} altrimenti {
this.commands = [];
}
}
Binding dei comandi RouterLink
Binding degli eventi
Classe RouterLink
@Attribute()
@Attribute('attributeName') decorator: Usato per ottenere il valore dell'attributo corrispondente al nome dell'attributo Nome sull'elemento comando host.
tabindex
La proprietà tabindex specifica l'ordine di controllo del tasto tab di un elemento (quando il tasto tab è usato per la navigazione).
I seguenti elementi supportano gli attributi tabindex: <a>, <area><button>, <input><object><select> , , , , e <textarea> .
Sintassi tabindex:
Classe RouterLink
Classe RouterLink
Comando RouterLinkWithHref
Direttiva RouterLinkWithHref
Proprietà di input direttiva RouterLinkWithHref
Comando RouterLinkWithHref
Binding degli attributi
I <a> tag definiscono collegamenti ipertestuali utilizzati per collegare da una pagina all'altra. <a> Ci sono due attributi importanti nei tag:
href - specifica l'indirizzo URL della pagina a cui il link conduce. Se non usi l'attributo href, non puoi usare i seguenti attributi: download, media, rel, target e type.
Target - specifica come si apre la pagina collegata nella finestra del browser, e i suoi valori dei parametri sono principalmente i seguenti:
_blank - Caricare il documento di destinazione in una nuova finestra del browser.
_parent - Questo obiettivo fa sì che il documento si carichi nella finestra o nel set di frame genitore contenente il frame a cui si fa riferimento il collegamento ipertestuale. Se questo riferimento si trova in una finestra o in un framework di livello superiore, allora è equivalente al _self target.
_self - Il valore di questo target è il target predefinito per tutte le etichette che non specificano un <a> target , il che fa sì che il documento target venga caricato e visualizzato come documento sorgente nello stesso frame o finestra. Questo target è ridondante e inutile a meno che <base> non venga usato con l'attributo target nella scheda titolo del documento.
_top - Questo obiettivo fa sì che il documento carichi la finestra contenente il collegamento ipertestuale e, usando il target di _top, si cancelleranno tutti i frame inclusi e si caricherà il documento nell'intera finestra del browser.
Binding degli eventi
MouseEvent rappresenta un evento che si verifica quando un utente interagisce con un dispositivo puntatore (come un mouse), e gli eventi comuni includono: click, dblclick, mouseup e mousedown. L'oggetto MouseEvent contiene un attributo button che rappresenta il tasto del mouse premuto dall'utente, e i possibili valori degli attributi sono i seguenti:
- 0 - Si preme il pulsante principale, solitamente riferito al tasto sinistro del mouse.
- 1 - Si preme il pulsante ausiliario, solitamente riferito alla rotella del mouse.
- 2 - Si preme il secondo tasto, solitamente riferendosi al tasto destro del mouse.
- 3 - Si preme il quarto pulsante, solitamente riferito al tasto di ritorno del browser.
- 4 - Si preme il quinto pulsante, solitamente riferendosi al pulsante di avanzamento del browser.
Per un mouse configurato per l'uso mancino, le pressioni di tasti saranno l'opposto. In questo caso, il valore viene letto da destra a sinistra. Nel codice di esempio sopra, accediamo anche alle proprietà ctrlKey e metaKey dell'oggetto MouseEvent, che contengono le proprietà altKey e shiftKey oltre a queste due proprietà. Questi attributi sono descritti di seguito:
- MouseEvent.ctrlKey - restituisce true se il tasto controllo viene premuto quando viene attivato l'evento del mouse.
- MouseEvent.metaKey - restituisce true se il tasto (Window - ⊞, Mac - ⌘ Command) viene premuto quando viene attivato l'evento del mouse.
- MouseEvent.altKey - Restituisce la funzione true quando viene attivato l'evento del mouse se si preme il tasto (Window - alt, Mac - Option o ⌥).
- MouseEvent.shiftKey - Restituisce la vera se il tasto shift viene premuto quando viene attivato un evento del mouse.
Se premi ctrlKey e poi clicchi sulla scheda, verrà <a> creata una nuova pagina di scheda usando l'URL attuale. Se premi metaKey e poi clicchi sulla <a> scheda, la pagina corrente verrà aggiornata. Pertanto, nel metodo onClick(), viene eseguito il giudizio corrispondente.
Ciclo di vita dei comandi RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Classe RouterLinkWithHref
Classe RouterLinkWithHref
Classe RouterLinkWithHref
Introduzione al comando RouterLinkActive
La direttiva RouterLinkActive permette di aggiungere classi CSS a un elemento quando la rotta collegata diventa attiva. Dai un'occhiata al seguente esempio:
Quando l'indirizzo URL è /user o /user/bob, la classe active-link verrà aggiunta <a> al tag. Se l'URL cambia, la classe active-link viene automaticamente rimossa dal <a> tag. Puoi anche aggiungere più classi contemporaneamente, come segue:
Quando applichi il comando routerLinkActive, puoi anche usare il parametro routerLinkActiveOptions per configurare come vengono abbinati gli URL, come segue:
Quando il parametro {exact: true} è configurato, la classe attiv-link viene aggiunta al tag solo se l'indirizzo URL corrisponde <a> esattamente a . Puoi anche assegnare un'istanza RouterLinkActive a una variabile modello e controllare lo stato isActive delle direttive di comando in modo direttivo:
Infine, puoi anche applicare il comando RouterLinkActive all'elemento genitore del RouterLink. Esempi includono:
Nell'esempio sopra, quando l'URL è indirizzato come /user/jim o /user/bob, la classe active-link viene aggiunta <div> all'elemento corrispondente.
Comando RouterLinkActive spiegato in dettaglio
Definizione del comando RouterLinkActive
Proprietà di input del comando RouterLinkActive
Ciclo di vita dei comandi RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Classe RouterLinkActive
Classe RouterLinkActive
Classe RouterLinkActive
|
Precedente:C'è una funzione qui che è davvero bella, puoi guadagnare, è la promozione.Prossimo:Rilasciato un plugin DZ online payment free-contract, disponibile per test personali.
|
