RouterLink angular

directive

Cuando se aplica a un elemento en una plantilla, convierte ese elemento en un enlace que inicia la navegación a una ruta. La navegación abre uno o más componentes enrutados en uno o más <router-outlet> ubicaciones en la página.

Ver más…

Exportado de

• RouterModule

Selectores

• :not(a):not(area)[routerLink]

Propiedades

Descripción

Dada una configuración de ruta [ path: 'user/:name', component: UserCmp ], lo siguiente crea un static enlace a la ruta: routerLink="/user/bob">link to user component

Puede utilizar valores dinámicos para generar el enlace. Para un enlace dinámico, pase un array de segmentos de ruta, seguidos de los parámetros de cada segmento. Por ejemplo, ['/team', teamId, 'user', userName, details: true] genera un enlace a /team/11/user/bob;details=true.

Múltiple static los segmentos pueden fusionarse en un término y combinarse con segmentos dinámicos. Por ejemplo, ['/team/11/user', userName, details: true]

La entrada que proporciona al enlace se trata como un delta a la URL actual. Por ejemplo, suponga que la URL actual es /user/(box//aux:team). El enlace routerLink]="['/user/jim']">Jim crea la URL /user/(jim//aux:team). Consulte createUrlTree para obtener más información.

Puede usar rutas absolutas o relativas en un enlace, establecer parámetros de consulta, controlar cómo se manejan los parámetros y mantener un historial de los estados de navegación.

Rutas de enlace relativas

El nombre del primer segmento se puede anteponer con /, ./, o ../.

• Si el primer segmento comienza con /, el enrutador busca la ruta desde la raíz de la aplicación.
• Si el primer segmento comienza con ./, o no comienza con una barra, el enrutador busca en los hijos de la ruta activada actual.
• Si el primer segmento comienza con ../, el enrutador sube un nivel en el árbol de ruta.

Configuración y manejo de fragmentos y parámetros de consulta

El siguiente enlace agrega un parámetro de consulta y un fragmento a la URL generada:

  link to user component

De forma predeterminada, la directiva construye la nueva URL utilizando los parámetros de consulta dados. El ejemplo genera el enlace: /user/bob?debug=true#education.

Puede indicar a la directiva que maneje los parámetros de consulta de manera diferente especificando el queryParamsHandling opción en el enlace. Los valores permitidos son:

• 'merge': Fusionar lo dado queryParams en los parámetros de consulta actuales.
• 'preserve': Conserva los parámetros de consulta actuales.

Por ejemplo:

  link to user component

Consulte UrlCreationOptions # queryParamsHandling.

Conservando el historial de navegación

Puede proporcionar un state valor que se persistirá en el navegador History.state propiedad. Por ejemplo:

  link to user component

Utilice Router # getCurrentNavigation para recuperar un valor de estado de navegación guardado. Por ejemplo, para capturar la tracingId durante el NavigationStart evento:

// Get NavigationStart events
router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => 
  const navigation = router.getCurrentNavigation();
  tracingService.trace(id: navigation.extras.state.tracingId);
);