Arasındaki fark nedir [routerLink]ve routerLink? Her birini nasıl kullanmalısınız?
Yanıtlar:
Bunu tüm direktiflerde göreceksiniz:
Parantez kullandığınızda bu, bağlanabilir bir özelliği (bir değişken) geçirdiğiniz anlamına gelir.
<a [routerLink]="routerLinkVariable"></a>
Yani bu değişken (routerLinkVariable) sınıfınızın içinde tanımlanabilir ve aşağıdaki gibi bir değere sahip olmalıdır:
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
Ama değişkenlerle, onu dinamik hale getirme fırsatınız var değil mi?
export class myComponent {
public routerLinkVariable = "/home"; // the value of the variable is string!
updateRouterLinkVariable(){
this.routerLinkVariable = '/about';
}
Köşeli parantezler olmadan yalnızca dizeyi geçtiğiniz ve onu değiştiremeyeceğiniz yerde, sabit kodlanmıştır ve uygulamanızın her yerinde böyle olacaktır.
<a routerLink="/home"></a>
GÜNCELLEME :
Özellikle routerLink için parantez kullanmanın diğer özelliği, dinamik parametreleri gittiğiniz bağlantıya aktarabilmenizdir:
Yani yeni bir değişken eklemek
export class myComponent {
private dynamicParameter = '129';
public routerLinkVariable = "/home";
[RouterLink] güncelleniyor
<a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>
Bu bağlantıya tıklamak istediğinizde, şu hale gelir:
<a href="https://stackoverflow.com/home/129"></a>
Sahip olduğunuzu varsayın
const appRoutes: Routes = [
{path: 'recipes', component: RecipesComponent }
];
<a routerLink ="recipes">Recipes</a>
Bu, Tarifler bağlantısının tıklanmasının http: // localhost: 4200 / tariflerine atlayacağı anlamına gelir.
Parametrenin 1 olduğunu varsayın
<a [routerLink] = "['/recipes', parameter]"></a>
Bu, dinamik parametre 1'i bağlantıya geçirmeniz, ardından http: // localhost: 4200 / recipe / 1'e gitmeniz anlamına gelir.
Yönlendirici Bağlantısı
RouterLink ile parantez ve hiçbiri - basit açıklama.
RouterLink = ve [routerLink] arasındaki fark, çoğunlukla göreli ve mutlak yol gibidir.
Bir href'e benzer şekilde ./about.html veya https://your-site.com/about.html adresine gitmek isteyebilirsiniz .
Parantez olmadan kullandığınızda, göreli ve parametresiz gezinirsiniz;
my-app.com/dashboard/client
dan "atlama" my-app.com/dashboard için my-app.com/dashboard/client
<a routerLink="client/{{ client.id }}" .... rest the same
RouterLink'i parantezlerle kullandığınızda, mutlak gezinmek için uygulamayı çalıştırırsınız ve yeni bağlantınızın bulmacası nasıldır?
her şeyden önce, gösterge tablosundan / gösterge panosuna / istemci / müşteri kimliğine "atlamayı" içermeyecek ve size müşteri / müşteri kimliği verilerini getirecek, bu da MÜŞTERİ DÜZENLEME için daha yararlıdır
<a [routerLink]="['/client', client.id]" ... rest the same
RouterLink'in mutlak yolu veya parantezleri, bileşenlerinizin ve app.routing.module.ts'nin ek kurulumunu gerektirir.
Testi yaptığınızda, hatasız kod "size daha fazlasını / [] 'nin amacının ne olduğunu söyleyecektir". Bunu [] ile veya [] olmadan kontrol edin. Daha sonra, yukarıda bahsedildiği gibi, dinamik yönlendirmeye yardımcı olan seçicilerle deneyler yapabilirsiniz.
RouterLink yapısının ne olduğunu görün