Diferença entre [routerLink] e routerLink

Qual é a diferença entre [routerLink]e routerLink? Como você deve usar cada um?

Você verá isso em todas as diretivas:

Quando você usa colchetes, significa que está passando uma propriedade vinculável (uma variável).

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

Portanto, esta variável (routerLinkVariable) pode ser definida dentro de sua classe e deve ter um valor como abaixo:

export class myComponent {

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

Mas com variáveis, você tem a oportunidade de torná-lo dinâmico, certo?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Onde, como sem colchetes, você está passando apenas string e não pode alterá-lo, é codificado e será assim em todo o seu aplicativo.

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

ATUALIZAÇÃO:

A outra especialidade sobre o uso de colchetes especificamente para routerLink é que você pode passar parâmetros dinâmicos para o link para o qual está navegando:

Então, adicionando uma nova variável

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

Atualizando o [routerLink]

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

Quando você quiser clicar neste link, ele se tornará:

  <a href="https://stackoverflow.com/home/129"></a>

Suponha que você tenha

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

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

Isso significa que clicar no hiperlink Receitas irá saltar para http: // localhost: 4200 / recipes

Suponha que o parâmetro seja 1

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

Significa passar o parâmetro dinâmico 1 para o link e navegar para http: // localhost: 4200 / recipes / 1

Link do roteador

routerLink com colchetes e nenhum - explicação simples.

A diferença entre routerLink = e [routerLink] é principalmente como caminho relativo e absoluto.

Semelhante a um href, você pode navegar para ./about.html ou https://seu-site.com/about.html .

Quando você usa sem colchetes, então você navega relativo e sem parâmetros;

my-app.com/dashboard/client

"saltando" de my-app.com/dashboard para my-app.com/dashboard/client

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

Ao usar o routerLink com colchetes, você executa o aplicativo para navegar absoluto e pode adicionar parâmetros como está o quebra-cabeça do seu novo link

em primeiro lugar, ele não incluirá o "salto" do painel / para painel / cliente / id do cliente e trará a você os dados do cliente / id do cliente, o que é mais útil para EDITAR CLIENTE

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

A forma absoluta ou colchetes routerLink requerem configuração adicional de seus componentes e app.routing.module.ts

O código sem erro irá "dizer mais / qual é o propósito de []" quando você fizer o teste. Basta verificar isso com ou sem []. Então você pode experimentar com seletores que - como mencionado acima - ajudam com o roteamento dinâmico.

Seletores Angular.io

Veja o que é a construção routerLink

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