Angular之路由实践

什么是路由

上篇博客小编主要讲了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里啦！

整个的实现过程就是这样的，当然，如有哪些地方可以改善，欢迎大家在评论处提建议！