Kết nối các Route tới các Action.

Với routing, người dùng có thể điều hướng thông qua ứng dụng bằng nhiều cách.

• Người dùng có thể click vào một menu, link, hình ảnh, button

• Gõ url vào trong address bar

• Click vào button chuyển tiếp hoặc button quay lại của trình duyệt.

Cách thứ hai và thứ ba hoạt động dự vào đặc tính kỹ thuật của browser, do đó chúng ta sẽ chỉ tìm hiểu làm thế nào chúng ta thực hiện được cách thứ nhất.

Ứng dụng của chúng ta có rất nhiều menu-option và sub-options, nhưng chúng ta sẽ chỉ tập trung vào menu Home và ProductList trong khuân khổ bài học này.

Để buộc một route với một menu option, chúng ta sử dụng routerLink như đoạn code dưới đây. routerLink là một attribute directive.

//app.component.ts

@Component({

selector: 'pm-app',

template: `

<ul class='nav navbar-nav'>

<li><a [routerLink]="['/welcome']">Home</a></li>

<li><a [routerLink]="['/products']">Product List</a></li>

</ul> `

})

Chỉ đơn giản như vậy là chúng ta đã có thể kết nối các route tới các action mà chúng ta mong muốn.