Qual'è la differenza tra [routerLink]e routerLink? Come dovresti usarli?
Risposte:
Lo vedrai in tutte le direttive:
Quando usi le parentesi, significa che stai passando una proprietà associabile (una variabile).
<a [routerLink]="routerLinkVariable"></a>
Quindi questa variabile (routerLinkVariable) potrebbe essere definita all'interno della tua classe e dovrebbe avere un valore come di seguito:
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
Ma con le variabili, hai l'opportunità di renderlo dinamico, giusto?
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
updateRouterLinkVariable(){
this.routerLinkVariable = '/about';
}
Dove come senza parentesi stai passando solo la stringa e non puoi cambiarla, è hard coded e sarà così per tutta la tua app.
<a routerLink="/home"></a>
AGGIORNARE :
L'altra specialità dell'utilizzo delle parentesi specifiche per routerLink è che puoi passare parametri dinamici al collegamento verso cui stai navigando:
Quindi aggiungendo una nuova variabile
export class myComponent {
private dynamicParameter = '129';
public routerLinkVariable = "/home";
Aggiornamento di [routerLink]
<a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>
Quando si desidera fare clic su questo collegamento, diventerà:
<a href="https://stackoverflow.com/home/129"></a>
Supponi di averlo fatto
const appRoutes: Routes = [
{path: 'recipes', component: RecipesComponent }
];
<a routerLink ="recipes">Recipes</a>
Significa che facendo clic sul collegamento ipertestuale Ricette si passerà a http: // localhost: 4200 / ricette
Supponiamo che il parametro sia 1
<a [routerLink] = "['/recipes', parameter]"></a>
Significa che passando il parametro dinamico, 1 al collegamento, si accede a http: // localhost: 4200 / ricette / 1
Collegamento al router
routerLink tra parentesi e nessuno - semplice spiegazione.
La differenza tra routerLink = e [routerLink] è principalmente come il percorso relativo e assoluto.
Simile a un href a cui potresti voler navigare ./about.html o https://your-site.com/about.html .
Quando si utilizza senza parentesi, si naviga in modo relativo e senza parametri;
my-app.com/dashboard/client
"saltare" da my-app.com/dashboard a my-app.com/dashboard/client
<a routerLink="client/{{ client.id }}" .... rest the same
Quando usi routerLink con parentesi, esegui l'app per navigare in assoluto e puoi aggiungere parametri come è il puzzle del tuo nuovo collegamento
prima di tutto non includerà il "salto" da dashboard / a dashboard / client / client-id e ti porterà i dati di client / client-id che sono più utili per EDIT CLIENT
<a [routerLink]="['/client', client.id]" ... rest the same
Il modo assoluto o le parentesi routerLink richiedono una configurazione aggiuntiva dei tuoi componenti e app.routing.module.ts
Il codice senza errori "ti dirà di più / qual è lo scopo di []" quando farai il test. Controlla questo con o senza []. Quindi puoi sperimentare con selettori che, come menzionato sopra, aiutano con il routing dinamico.
Guarda cos'è il costrutto routerLink