Angular之路由实践

前端之家收集整理的这篇文章主要介绍了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里啦!


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

猜你在找的Angularjs相关文章