Angular最新教程-第九节 路由二（路由策略、base标签、路由参数）

路由策略

我们上一节课中提到了

{provide:LocationStrategy,useClass:HashLocationStrategy}

上一节课中我们说明了html中传统的锚标示路由。

这里我们再看新的路由的另一种实现方式了。

是HTML5的新规则，在不需要刷新页面的轻快下，允许在代码中创建新的浏览器记录并显示适当的URL。

简单的说，就是你可以用代码修改地址栏的URL而不刷新页面。

这是使用js中的history.pushState方法实现的。

语法如下：

history.pushState(state, title, url);

（需要注意的是微信虽然支持了HTML5，但是微信中这个方法不能用，不允许修改URL地址。）

Angular中，路由的默认形式是新的这种HTML5。

上面我们已经提到了这种方式有些浏览器不支持。

而且，当我们使用服务端渲染的方式部署时。

要使用HTML5这种方式，还需要服务端配合。

所以我们这里增加了定位策略（LocationStrategy）。

LocationStrategy负责从浏览器的URL表示和读取路由状态。

angular提供了两种策略：HashLocationStrategy和PathLocationStrategy。

应用程序应使用Router或Location与应用路由状态进行交互。

例如，HashLocationStrategy会生成类似

http://example.com#/foo

的URL，

而PathLocationStrategy会生成

http://example.com/foo

作为等效的URL。

base标签

上一节课中我们在index.html中的head里加入了

<base href="/">

传统的作用是使用相对路径来告知浏览器去哪里查找图片和其他资源。

这里可以查看w3cschool上面的例子http://www.w3school.com.cn/tiy/t.asp?f=html_base_test

<base href="http://www.w3school.com.cn/i/" />

<img src="eg_smile.gif" />

请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：

http://www.w3school.com.cn/i/eg_smile.gif

Angular的Router模块也根据这个标签来构建路由信息。

例如:

base='/app'

,当我们访问路由latest时，实际上访问了

/app/#/latest

。

在Angular中还提供了，在js中设置这个路径的方法。

APP_BASE_HREF

我们在src\app\app.module.ts中

头部修改导入

import { LocationStrategy ,HashLocationStrategy , APP_BASE_HREF} from '@angular/common';

的@NgModule的providers加入

{provide:APP_BASE_HREF,useValue:'/app'}

上述代码等同于在index.html中加入标签

<base href='/app'>

保存运行。



访问路由前面增加了

/app

实际项目中我们使用

{provide:APP_BASE_HREF,useValue:'/'}

路由参数

Angular4中的路由参数使用方法和angular1中相同。

都是在配置路由路径的时候使用

/:paramName

。

来定义路由参数。

我们先新建一个文章详情页面。

$ ng generate component article

然后在路由中增加文章的路由。

{path:'article/:article_id',component:ArticleComponent}

打开src\app\article\article.component.ts。

在头部导入ActivatedRoute模块。

ActivatedRoute模块：包含与加载在出口中的组件关联的路由的信息。

还可以使用ActivatedRoute来遍历路由器状态树。

我们使用它来取得我们在路由中传递的参数。



我们在构造函数中使用ActivatedRoute。

ActivatedRoute返回的params，也是一个可观测对象。

可以简单理解为一个异步过程的回调。

所以我们使用subscribe将params取出来。

然后将里面的article_id参数赋值给当前页面。

保存运行，访问

http://localhost:4200/#/article/123

源代码：百度云 实际代码变化较少，不更新压缩文件。

码云：https://gitee.com/xiaohuOni/oniplan-ng

有码云的帮忙给个star，感谢。

这节课的内容就到这里完成了。

感谢您的阅读。

我是莽夫，希望你开心。

如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。

希望大家关注我的个人公众号ionic_