Angular创建模块并分配路由

1、使用 ng g module npages --routing 创建一个带路由的模块。

2、在npages模块中创建组件 ng g c npages/onep 。

3、在npages模块的路由文件中引入模块并分配路由。

4、在 app-routing.module.ts 文件中的Routes数组中引入模块

辅助路由案例的思路：

1、在APP组件模板上再定一个插座来显示在线咨询组件

2、单独开发一个在线咨询组件，只显示在新定义的插座上

首先生成一个consult咨询组件

然后用css样式调整下主页模板和股票详情模板

在路由配置中写咨询组件的辅助路由，其中outlet指定放在哪个路由插座上

3、通过路由参数控制新的辅助插座是否显示在线咨询组件

在主页模板上添加2个链接，一个是开始咨询，一个是结束咨询

开始咨询链接中routerlink里不是写路径了，而是写路由插座信息，outlets对应路由插座是aux，aux后对应consult组件的路由路径consult。

结束咨询中aux对应的路由路径是null，表示什么都不显示

最后看看实际效果：

点击开始咨询，出现绿色咨询框。点击结束咨询，咨询框消失。

如果在开始咨询链接中routerlink里outlets后添加“primary：home”，其中primary表示主路由，这句话的意思是当点击开始咨询时，控制主路由跳转至主页上

效果如下：

生成一个新的项目 --routing会为我们生成路由相关的模块

路由相关的对象：

routes 路由的配置，保存了哪个url对应展示哪个对象，以及在哪个 routerOutlet 中展示。

routeOutlet 占位符指令，在html中标记路由呈现的位置。

router 负责在运行时执行路由的对象。

navigate()

navigateByUrl()

通过这两个方法来导航到一个指定的路由

routerLink 指令，用于在html中声名路由导航，可以传递参数，参数是一个数组类型。

ActivatedRoute 当前激活的路由对象 保存着路由信息，如地址，参数等

路由参数传递：

1.在查询参数中传递queryParams

效果 http://localhost:4200/?id=3

在对应的组件中接收，这里借助的是 ActivatedRoute 对象来获取参数

2.在url中传递参数

修改 app-routing.module.ts 中的path配置，使其可以携带参数，并修改productComponent的routerLink

效果 http://localhost:4200/product/1

接收参数，只需要把上面第一种方式的queryParams替换为params就可以了

3.事件绑定传递数据

定义我们绑定的方法

在对应的组件中接收

4.小问题补充

snapshot 参数快照 subscribe 参数订阅

路由重定向

用户房顶一个特定的地址是，将其重定向到另一个地址。比如你打开 www.didi.com 结果打开了 www.google.com

这一段的意思是，当我访问空路径时，当前路由重定向到home上，比较简单的内容。

子路由

路由的children属性添加

然后需要在ProductCompont.html中添加配置 routerLint 以及 router-outlet

这样我们就实现了子路由，同样我们仍然可以传递参数，接收方式与之前一致，从本质上来讲，子路由就是组件之间的 router-outlet形成的父子关系 。

辅助路由

辅助路由 1.router-outlet name="xxxx" 2.outlet:"xxxx" 3.{outlets:{xxxx:"yyy"}}

本质就是一个路由允许定义多个 router-outlet

1.app组件中重新定义一个router-outlet

2.单独开发一个组件

2.通过路由配置控制

增加两个链接，注意 outlets 不是 outlet

点击开始聊天,浏览器显示结果： http://localhost:4200/home(aux:chat)

补充，如果我们想不管我们在哪里，都希望主路由是home,可以这样更改，添加 primary:'home'

路由守卫

需求：只有当用户登录获取某些权限时候才能够进入某些路由 或者 当用户未执行保存 *** 作而试图离开当前导航时提醒用户。

CanActivate 处理导航到某路由的情况

CanDeactivate 处理从当前路由离开的情况

Resolve 处理在激活路由之前获取路由数据，这样在进入路由后数据展示会更快

创建文件，模拟登陆逻辑和离开的逻辑

login.guard.ts

unsave.guard.ts 这里需要将需要守卫的路由作为泛型传递过去

接下来，去改写路由的配置 app-routing.modules.ts 我们只针对product做 *** 作

注意不要忘了

然后就可以愉快的玩耍了。。。

---