Sự khác biệt giữa [routerLink] và routerLink

Question

sự khác biệt giữa [routerLink] và routerLink là gì? khi sử dụng mỗi cái?

Answer 1

Bạn sẽ thấy điều này trong tất cả các chỉ thị:

Khi bạn sử dụng dấu ngoặc, nó có nghĩa là bạn đang đi qua một tài sản bindable (một biến).

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

Vì vậy, biến này (routerLinkVariable) có thể được định nghĩa bên trong lớp học của bạn và nó sẽ có giá trị như dưới đây:

export class myComponent { 

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

Nhưng với các biến, bạn có cơ hội để làm cho nó năng động phải không?

export class myComponent { 

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


    updateRouterLinkVariable(){ 

     this.routerLinkVariable = '/about'; 
    } 

Nơi không có dấu ngoặc bạn chỉ chuyển chuỗi và bạn không thể thay đổi, mã hóa cứng và nó sẽ giống như trong ứng dụng của bạn.

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

UPDATE:

Các chuyên ngành khác về việc sử dụng dấu ngoặc đặc biệt cho routerLink là bạn có thể vượt qua các thông số động để liên kết mà bạn đang điều hướng tới:

Vì vậy, thêm một mới biến

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

Cập nhật [routerLink]

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

Khi bạn muốn nhấp vào liên kết này, nó sẽ trở thành:

<a href="/home/129"></a> 

Answer 2

Giả sử rằng bạn có

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

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

Nó có nghĩa là cách nhấn vào Công thức siêu liên kết sẽ nhảy đến http://localhost:4200/recipes

Giả sử rằng thông số là 1

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

Điều này có nghĩa là chuyển tham số động, 1 đến liên kết, sau đó bạn điều hướng đến http://localhost:4200/recipes/1