Angular路由器是一个可选的外部Angular ngModule,通过配置和使用路由器,页面可以根据url来切换不同的视图以达到导航的目地。
首先,要在根module中导入RouterModule模块并配置routers。
import { RouterModule } from '@angular/router';
@ngModule({
imports: [
RouterModule.forRoot([{
path: 'page1',
component: Page1Component
}])
]
})
当url地址以/page1结尾时,页面的视图就会显示Page1Component的模板,但是显示在哪里呢?
在根组件的模板中使用路由指令RouterOutlet标签,目标视图就会显示在这个标签内。
...
template: `
<router-outlet></router-outlet>
`
...
但是我们的链接呢?如果直接使用<a href="/page1"></a>显然无法和路由关联起来,这个时候我们就要使用另外一个路由指令RouterLink。
...
template: `
<a routerLink="/page1">to page1</a>
<router-outlet></router-outlet>
`
...