Qual é a diferença entre [routerLink]e routerLink? Como você deve usar cada um?
Respostas:
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.
Veja o que é a construção routerLink