Xếp chỗ các View

Khi các route được kích hoạt, component liên kết với route sẽ được hiển thị, nhưng nó sẽ hiển thị ở đâu? Làm thế nào để chúng ta xác định nơi chúng ta muốn component được định tuyến hiển thị? Chúng ta sử dụng router outlet directive.

Chúng ta đặt directive này vài trong template component chính, Component được định tuyến sẽ được xuất hiện ở vị trí đặt directive này. Như ví dụ dưới đây.

//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>

<router-outlet></router-outlet> `

})