Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题.为了说明今天的问题,我特地新建了一个测试工程.欢迎交流. 首先介绍一下测试代码的组织结构, 其中包含两个组件:button.accordion.这个例子采用的是ng2-bootstrap. 我展示一下路由配置: /** * Created by guozhiqi on 2017/2/24. */ import {Route,Routes}from '@angul…

笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在Views里写对应的Action.cshtml,使用ajax发起请求已经是比较前端的事情了.这种时候由于DotNet MVC框架继承的微软风格的懒人模式,甚至不需要去知道其路由是如何实现的,给人一种感觉是只要在浏览器里敲进去Controller名与Action名,就访问到视图了. 后来笔者开始使用n…

angular2的路由定义了一个/a,如果走angular的路由没问题,如果直接访问/a就会出现cannot GET /a的错误,原因就是express的路由问题. 所以路由走angular2,那express要配置/a的时候sendFile到该index.html就可以了. 简单的方式就是把ng2定义的所有路由都转到index,还有种方式就是用通配符了. static里面是ng2的各种js和style,然后剩下的除了ajax都转向index,这里express处理完了路由就会不往下处理,除非调…

angular2的routerLinkActive指令在路由激活时添加样式class .red{  color: red;}    <a routerLink="/user/login" routerLinkActive="red">login</a> 当url是user或者/user/login的时候,a标签将会被加上classred.当url变化为别的时,class将会被移除. 如何添加两个class    <a routerLin…

路由是个模块,命令行生成:ng generate module routerTest; 自己组建: 路由模块说明: Routes:路由配置,路由配置文件类型.比如:const routing:Routes =[{path: '',component:HomeComponent}]; RouterOutlet:HTML 占位符,路由的模版将会在这个位置展现. RouterLink :HTML 中的路由链接,相当与angular1 的ui-serf.改变地址来转换不同的模块. Router :执行路…

点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,LocationStrategy} from '@angular/common'; 并在 providers下添加所引入的服务: providers: [{provide: LocationStrategy,useClass: HashLocationStrategy}] 备注:出现问题的原因:刷新页面时寻…

simpleReuseStrategy.ts // 创建重用策略 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'; /** * 路由重用策略 */ export class SimpleReuseStrategy implements RouteReuseStrategy { // 保存路由快照 // [key:string] 键为字符串类型 //…

上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们的程序更好的工作. 假设你已经跟上了我们的进度. 我们来为我们的文章明细新增一个评论框:当我们在明细中点击评论的时候,在我们的明细页面显示评论,这里,我们就可以完全把明细页面看成一个独立的路由,可以建立自己的子路由页面,做一些评论,分享等操作. 那,首先在data目录下建立我们的评论实体Commen…

一步一步route过去可以,地址栏直接写url怎么就找不到了呢? 这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) express 封装了多种 http 请求方式,我们主要只使用 get和post,可以使用 app.all 获取所以请求方式,回调函数有两个参数分别是 req 和 res,代表请求信息和响应信息. req.query : 处理 get 请求 req.params : 处理 /:xxx 形式的 get 请求…

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa…