生成一个新的项目 --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做 *** 作
注意不要忘了
然后就可以愉快的玩耍了。。。
还是将代码包装到事件响应函数中处理吧！给一个例子你看看。HTML：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="EventController">
Root scope <tt>MyEvent</tt>count: {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="EventController">
<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
<br>
Middle scope <tt>MyEvent</tt>count: {{count}}
<ul>
<li ng-repeat="item in [1, 2]" ng-controller="EventController">
Leaf scope <tt>MyEvent</tt>count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
JS：
function EventController($scope) {
$scope.count = 0
$scope.$on('MyEvent', function() {
$scope.count++
})
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）