angular2:路由器的使用

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>

`

...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容