Diferencia entre [routerLink] y routerLink

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

Verá esto en todas las directivas:

Cuando usa corchetes, 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';
    }

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

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

ACTUALIZAR:

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="https://stackoverflow.com/home/129"></a>

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 irá 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

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 forma similar a un href, es posible que desee navegar a ./about.html o https://your-site.com/about.html .

Cuando usa sin corchetes, navega de forma relativa 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 corchetes, ejecuta la aplicación para navegar de forma absoluta y puede agregar parámetros, ¿cómo es el rompecabezas de su nuevo enlace?

En primer lugar, no incluirá el "salto" del panel de control / al panel de control / cliente / identificación de cliente y le brindará datos de cliente / identificación de cliente, que es más útil para EDITAR CLIENTE

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

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

El código sin error "te dirá más / cuál es el propósito de []" cuando realices la prueba. Simplemente marque esto con o sin []. Entonces puede experimentar con selectores que, como se mencionó anteriormente, ayudan con el enrutamiento dinámico.

Selectores de Angular.io

Vea cuál es la construcción routerLink

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