|
|
Publicado en 25/10/2018 15:52:29
|
|
|
Introducción a los comandos RouterLink
El comando RouterLink te permite enlazar a una parte específica de tu aplicación. Si el enlace es estático, podemos usar el comando de la siguiente manera:
Si necesitas generar direcciones de enlace con valores dinámicos, puedes pasar un array de segmentos de camino y luego los parámetros de cada segmento. Por ejemplo, usar un array de ['/team', teamId, 'user', userName, {details: true}] significa que queremos generar un enlace a /team/11/user/bob; detalles=verdadero 。
Múltiples segmentos estáticos pueden fusionarse en uno solo, por ejemplo, ['/team/11/user', userName, {details: true}].
El primer fragmento de camino puede definirse como /, ./ o . / Comienzo:
- Si empieza por /, la ruta empezará a mirar hacia arriba desde la ruta raíz
- Si empieza por ./ o no se usa, la ruta empezará a mirar hacia arriba desde la ruta hija que está activa actualmente para la ruta
- Si empiezas con: / comienza, la ruta pasa al siguiente nivel de búsqueda
Puedes establecer parámetros de consulta y fragmentos de las siguientes maneras:
El comando RouterLink generará el siguiente enlace basado en los parámetros de entrada establecidos arriba: /user/bob#education?debug=true. Además, podemos declarar cómo manejar los parámetros de consulta mediante la propiedad queryParamsHanding; las opciones disponibles son:
- merge - Fusionar los QueryParams existentes en los actuales queryParams
- preserve - Guardar los consultaParams actuales
- por defecto ('') - Usar solo parámetros de consulta
Ejemplos de uso específicos son los siguientes:
Comando RouterLink explicado en detalle
Definición de comandos RouterLink
Propiedad de entrada de comandos RouterLink
Establecer los parámetros de consulta relacionados con la URL
@Input() queryParams: {[k: string]: any};
Establece el fragmento hash en la URL
@Input() fragmento: cuerda;
Establece el modo de procesamiento de parámetros de consulta: fusionar, preservar y predeterminado
@Input() queryParamsHandling: QueryParamsHandling;
Conjuntos sobre si conservar fragmentos
@Input() preserveFragment: boolean;
Al configurar la navegación por páginas, si añadir nuevos estados al historial
@Input() skiplocatio{filter}nChange: boolean;
Al configurar la navegación de la página, si reemplazar el estado actual en el historial
@Input() replaceUrl: boolean;
Establecer comandos información de parámetros, por ejemplo: ['/usuario/bob']
@Input()
set routerLink(commands: any[]|string) {
si (comandos != null) {
this.commands = Array.isArray(commands) ? órdenes : [órdenes];
} else {
this.commands = [];
}
}
Vinculación de comandos RouterLink
Vinculación de eventos
Clase RouterLink
@Attribute()
@Attribute('attributeName') decorador: Se usa para obtener el valor del atributo correspondiente al nombre del atributo Namename en el elemento host de comando.
tabindex
La propiedad tabindex especifica el orden de control de la tecla tab de un elemento (cuando se usa la tecla tab para la navegación).
Los siguientes elementos soportan atributos tabulador: <a>, <area><button>, <input><object><select> , , , , , y <textarea> .
sintaxis tabindex:
Clase RouterLink
Clase RouterLink
Comando RouterLinkWithHref
Directiva RouterLinkWithHref
Propiedad de entrada directiva RouterLinkWithHref
Comando RouterLinkWithHref
Vinculación de atributos
Las <a> etiquetas definen hipervínculos que se utilizan para enlazar de una página a otra. <a> Hay dos atributos importantes en las etiquetas:
HFEF - especifica la dirección URL de la página a la que lleva el enlace. Si no usas el atributo href, no puedes usar los siguientes atributos: descargar, medios, rel, objetivo y tipo.
Objetivo - especifica cómo se abre la página enlazada en la ventana del navegador, y sus valores de parámetros son principalmente los siguientes:
_blank - Carga el documento destino en una nueva ventana del navegador.
_parent - Este objetivo hace que el documento se cargue en la ventana o conjunto de marcos padre que contiene el marco referenciado por el hipervínculo. Si esta referencia está en una ventana o en un marco de nivel superior, entonces es equivalente al _self objetivo.
_self - El valor de este destino es el objetivo predeterminado para todas las etiquetas que no especifican <a> un objetivo, lo que provoca que el documento de destino se cargue y muestre como documento fuente en el mismo marco o ventana. Este destino es redundante e innecesario a menos que <base> se use con el atributo objetivo en la pestaña de título del documento.
_top - Este objetivo hace que el documento cargue la ventana que contiene el hipervínculo, y al usar el _top objetivo se borrarán todos los marcos incluidos y se cargará el documento en toda la ventana del navegador.
Vinculación de eventos
MouseEvent representa un evento que ocurre cuando un usuario interactúa con un dispositivo puntero (como un ratón), y eventos comunes incluyen: click, dblclick, mouseup y mousedown. El objeto MouseEvent contiene un atributo botón que representa el botón del ratón pulsado por el usuario, y los posibles valores de atributo son los siguientes:
- 0 - Se pulsa el botón principal, normalmente refiriéndose al botón izquierdo del ratón.
- 1 - Se pulsa el botón auxiliar, que normalmente se refiere a la rueda del ratón.
- 2 - Se pulsa la segunda tecla, normalmente refiriéndose al botón derecho del ratón.
- 3 - Se pulsa el cuarto botón, normalmente refiriéndose al botón de retroceso del navegador.
- 4 - Se pulsa el quinto botón, que normalmente se refiere al botón de avance del navegador.
Para un ratón configurado para uso zurdo, las pulsaciones de teclas serán lo contrario. En este caso, el valor se lee de derecha a izquierda. En el código de ejemplo anterior, también accedemos a las propiedades ctrlKey y metaKey del objeto MouseEvent, que contienen las propiedades altKey y shiftKey además de estas dos propiedades. Estos atributos se describen a continuación:
- MouseEvent.ctrlKey - devuelve true si se pulsa la tecla control cuando se activa el evento del ratón.
- MouseEvent.metaKey - devuelve true si se pulsa la tecla (Window - ⊞, Mac - ⌘ Command) cuando se activa el evento del ratón.
- MouseEvent.altKey - Devuelve true cuando se activa el evento del ratón si se pulsa la tecla (Window - alt, Mac - Option o ⌥).
- MouseEvent.shiftKey - Devuelve la verdadera si se pulsa la tecla shift cuando se activa un evento del ratón.
Si pulsas ctrlKey y luego haces clic en la pestaña, se <a> creará una nueva página de pestaña usando la dirección URL actual. Si pulsas metaKey y luego haces clic en la <a> pestaña, la página actual se actualizará. Por lo tanto, en el método onClick(), se realiza el juicio correspondiente.
Ciclo de vida de comandos RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Clase RouterLinkWithHref
Clase RouterLinkWithHref
Clase RouterLinkWithHref
Introducción al comando RouterLinkActive
La directiva RouterLinkActive te permite añadir clases CSS a un elemento cuando la ruta enlazada se activa correctamente. Echa un vistazo al siguiente ejemplo:
Cuando la dirección URL es /user o /user/bob, la clase active-link se añade <a> a la etiqueta. Si la URL cambia, la clase de enlace activo se elimina automáticamente de la <a> etiqueta. También puedes añadir varias clases a la vez, de la siguiente manera:
Al aplicar el comando routerLinkActive, también puedes usar el parámetro routerLinkActiveOptions para configurar cómo se emparejan las URLs, de la siguiente manera:
Cuando se configura el parámetro {exact: true}, la clase de enlace activo solo se añade a la etiqueta si la dirección URL coincide <a> exactamente con . También puedes asignar una instancia de RouterLinkActive a una variable plantilla y comprobar el estado isActive de las directivas de comando:
Por último, también puedes aplicar el comando RouterLinkActive al elemento padre de RouterLink. Ejemplos incluyen:
En el ejemplo anterior, cuando la URL se dirige como /user/jim o /user/bob, la clase active-link se añade <div> al elemento correspondiente.
Comando RouterLinkActive explicado en detalle
Definición del comando RouterLinkActive
Propiedad de entrada de comandos RouterLinkActive
Ciclo de vida de comandos RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Clase RouterLinkActive
Clase RouterLinkActive
Clase RouterLinkActive
|
Anterior:Aquí hay una función que es realmente buena, puedes ganar dinero, es la promoción.Próximo:Ha lanzado un plugin de pago online DZ sin contrato, disponible para pruebas personales.
|
