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

Sự khác biệt giữa [routerLink]và là routerLinkgì? Bạn nên sử dụng từng cái như thế nào?

Bạn sẽ thấy điều này trong tất cả các lệnh:

Khi bạn sử dụng dấu ngoặc, điều đó có nghĩa là bạn đang truyền một thuộc tính có thể ràng buộc (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 của bạn và nó phải 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ó động đúng không?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

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

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

CẬP NHẬT:

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

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

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

Đang 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="https://stackoverflow.com/home/129"></a>

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

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

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

Có nghĩa là khi nhấp vào siêu liên kết Recipes sẽ chuyển đến http: // localhost: 4200 / Cooking

Giả sử rằng tham số là 1

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

Có nghĩa là truyền tham số động, 1 đến liên kết, sau đó bạn điều hướng đến http: // localhost: 4200 / cook / 1

Liên kết bộ định tuyến

routerLink với dấu ngoặc và không có - giải thích đơn giản.

Sự khác biệt giữa routerLink = và [routerLink] hầu hết giống như đường dẫn tương đối và tuyệt đối.

Tương tự như một href mà bạn có thể muốn điều hướng đến ./about.html hoặc https://your-site.com/about.html .

Khi bạn sử dụng mà không có dấu ngoặc thì bạn điều hướng tương đối và không có tham số;

my-app.com/dashboard/client

"nhảy" từ my-app.com/dashboard sang my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

Khi bạn sử dụng routerLink với dấu ngoặc thì bạn thực thi ứng dụng để điều hướng tuyệt đối và bạn có thể thêm các tham số, câu đố về liên kết mới của bạn như thế nào

trước hết nó sẽ không bao gồm "bước nhảy" từ bảng điều khiển / đến bảng điều khiển / khách hàng / id khách hàng và mang lại cho bạn dữ liệu của khách hàng / id khách hàng, hữu ích hơn cho EDIT CLIENT

<a [routerLink]="['/client', client.id]" ... rest the same

Cách tuyệt đối hoặc dấu ngoặc đơn routerLink yêu cầu bạn thiết lập thêm các thành phần và app.routing.module.ts

Mã không có lỗi sẽ "cho bạn biết thêm / mục đích của []" là gì khi bạn thực hiện kiểm tra. Chỉ cần kiểm tra điều này có hoặc không có []. Hơn là bạn có thể thử nghiệm với các bộ chọn - như đã đề cập ở trên - giúp định tuyến động lực học.

Bộ chọn Angular.io

Xem cấu trúc routerLink là gì

https://angular.io/api/router/RouterLink#selectors