¿Cuál es la diferencia entre [routerLink] y routerLink? ¿Cómo debes usar cada uno?

105
Eslam Tahoon 29 dic. 2016 a las 01:42

3 respuestas

La mejor respuesta

Verá esto en todas las directivas:

Cuando usa paréntesis, significa que está pasando una propiedad enlazable (una variable).

  <a [routerLink]="routerLinkVariable"></a>

Entonces esta variable (routerLinkVariable) podría definirse dentro de su clase y debería tener un valor como el siguiente:

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!

Pero con las variables, tienes la oportunidad de hacerlo dinámico ¿verdad?

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Mientras que sin corchetes solo pasa una cadena y no puede cambiarla, está codificada y será así en toda su aplicación.

<a routerLink="/home"></a>

ACTUALIZACIÓN:

La otra especialidad sobre el uso de corchetes específicamente para routerLink es que puede pasar parámetros dinámicos al enlace al que está navegando:

Entonces agregando una nueva variable

export class myComponent {
        private dynamicParameter = '129';
        public routerLinkVariable = "/home"; 

Actualización de [routerLink]

  <a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>

Cuando desee hacer clic en este enlace, se convertiría en:

  <a href="/home/129"></a>
181
spottedmahn 1 may. 2018 a las 19:04

Enlace de enrutador

RouterLink con corchetes y ninguno: explicación simple.

La diferencia entre routerLink = y [routerLink] es principalmente como ruta relativa y absoluta.

De manera similar a un href, puede navegar a ./about.html o https: // su sitio. com / about.html.

Cuando lo usa sin corchetes, navega relativo y sin parámetros;

My-app.com/dashboard/client

"saltar" de my-app.com/dashboard a my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

Cuando usa routerLink con paréntesis, ejecuta la aplicación para navegar en absoluto y puede agregar parámetros, ¿cómo es el rompecabezas de su nuevo enlace?

En primer lugar, no incluirá el "salto" del tablero / al tablero / client / client-id y le traerá datos de client / client-id que es más útil para EDITAR CLIENTE

<a [routerLink]="['/client', client.id]" ... rest the same

La forma absoluta o los soportes de routerLink requieren una configuración adicional de sus componentes y app.routing.module.ts

El código sin error "le dirá más / cuál es el propósito de []" cuando realice la prueba. Simplemente verifique esto con o sin []. De lo que puede experimentar con selectores que, como se mencionó anteriormente, ayuda con el enrutamiento dinámico.

Selectores de Angular.io

Vea cuál es la construcción routerLink

https://angular.io/api/router/RouterLink#selectors

2
marc_s 28 nov. 2019 a las 20:03

Asume que tienes

const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>

Significa que al hacer clic en el hipervínculo Recetas se saltará a http: // localhost: 4200 / recipes

Suponga que el parámetro es 1

<a [routerLink] = "['/recipes', parameter]"></a>

Significa que pasar el parámetro dinámico, 1 al enlace, luego navega a http: // localhost: 4200 / recipes / 1

15
Sangwin Gawande 21 dic. 2017 a las 05:38