¿Cuál es la diferencia entre [routerLink]y routerLink? ¿Cómo debes usar cada uno?
Respuestas:
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.
Vea cuál es la construcción routerLink