property - routerlink params angular 5

Diferencia entre[routerLink] y routerLink

Question

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

Answer 1

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 saltará a http://localhost:4200/recipes

Suponga que el parámetro es 1

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

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

Answer 2

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>