什么是路由
上篇博客小编主要讲了Angular的路由概念,详情请click:Angular之路由概述。简单来说,路由就是从一个页面跳到另一个页面,而Angular的路由则是url与组件之间的关系。那路由到底是怎么跳来跳去,具体的执行步骤是怎么样的呢?
详细步骤
1.首先带大家看一下Angular的整体架构,首先ng serve项目启动后会先找到index.html,先渲染初始页面。然后找到main.ts,main.ts的配置会找到AppModule(AppModule在src目录下,如图2所示)。
2. 找到app.module.ts中,开始渲染组件app.component,app.component里有HTML和css的引入,渲染页面和样式。这里HTML只有一个插座。
<
router-outlet
></
router-outlet
>
插座的作用是之后的页面都会在这个插座的基础之上,也就是插在这个插座里。
3.真正实现路由跳转时在app.routes里定义路由配置,即我要跳到哪个页面。如下例所示:
(1).HTML页面如下:
<li>
<a>
<span>
<i [ngClass]="{'main_all_container': meStyle, 'main_part_container':!meStyle}" style="color:gray"
(click)="memode()">
<img src={{imgMeUrl}} height="30" width="25%">
</i>
</span>
<span class="span_font">个人中心</span>
</a>
</li>
(2).其中click事件指向memode方法,方式实现在component.ts中。
memode() {
this.router.navigate(["me"], { relativeTo: this.route });
}
(3).代码含义为路由跳转到me。me是在routes里配置:
children: [
{ path: 'me', loadChildren: './me/me.module#MeModule'}
]
(4).之后就可以跳到me的module里啦!
整个的实现过程就是这样的,当然,如有哪些地方可以改善,欢迎大家在评论处提建议!