Angular 2 + 折腾记 :(4)初步了解路由及使用
发布时间:2020-12-17 09:25:59 所属栏目:安全 来源:网络整理
导读:前言 路由这块的水挺深,我这里扯扯我用过的一些特性及一丢丢的经验 概念性的东西 言简意赅的总结一下: 路由就是控制视图与视图之间的跳转,之间还可以传递参数什么的,路由的退后及前进不会完整的请求整个页面,还可以完全不请求(在生命周期里面控制); angu
前言路由这块的水挺深,我这里扯扯我用过的一些特性及一丢丢的经验 概念性的东西言简意赅的总结一下: 路由就是控制视图与视图之间的跳转,之间还可以传递参数什么的,路由的退后及前进不会完整的请求整个页面,还可以完全不请求(在生命周期里面控制);
angular 4版本的路由加强了很多。。比如可以在路由进入或者脱离的时候做一些事件处理!!!,具体可以去看API的改动 常规路由import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
// 页面组件
import { NameComponent } from './name.component';
const routes: Routes = [
{
path: 'path',// path是路由访问的路径
component: NameComponent,//component是映射的组件
children:[ // children是嵌套组件的包含层
{
path:'',//留空可以让路径默认指向第一个组件,访问时候没有带任何子路径情况下
component:'ffff' // 对应的组件记得先提前引入
},
{
path:'edit/:id',// 这样是代表子组件需要带一个参数才能进入
component:'ggg' // 对应的组件记得先提前引入
}
]
}
];
@NgModule({
// 注入到模块中,forChild只能用于子模块,forRoot只能用于跟模块
// forRoot有一个可选的配置参数,里面有四个选项
// enableTracing :在console.log中打印出路由内部事件信息
// useHash :把url改成hash风格,protocol://domain/#/account/login
// initialNavigation : 禁用初始导航,没用过。。
// errorHandler :使用自定义的错误处理,来抛出报错信息;
imports: [RouterModule.forChild|Root(routes)],// exports是导出组件,一般用于自定义组件或者模块。。
exports: [RouterModule],})
懒加载import { ModuleWithProviders } from '@angular/core';
// 路由相关模块
import { Routes,RouterModule } from '@angular/router';
// 布局
import { MitLayoutComponent } from './widgets/mit-layout/mit-layout.component';
// 鉴权服务
import { RbacService } from './rbac/rbac.service';
const routes: Routes = [
{
path: '',redirectTo: '/page/dashboard/vehicle-overview',pathMatch: 'full',// 匹配全局,默认是'prefix','full'是全局匹配/
canActivate: [RbacService] // canActivate是内置拦截器,RbacService是鉴权服务
},{
path: 'page',component: MitLayoutComponent,canActivate: [RbacService],children: [ // 懒加载在目前的版本都必须用绝对路径指向对应的模块,dashboard.module是文件名,#DashboardModule是里面到处的模块,必须紧跟才能正确识别
{ path: 'base-data',loadChildren: 'app/modules/base-data/base-data.module#BaseDataModule' },// 基础数据
},{ // 账号相关
path: 'account',loadChildren: 'app/modules/account/account.module#AccountModule',},{
path: 'event',loadChildren: 'app/modules/mobile-alarm/mobile-alarm.module#MobileAlarmModule' // 安全警报移动端处理
},{ path: 'error',loadChildren: 'app/modules/error/error.module#ErrorModule' },// 错误
{ path: 'not-found',redirectTo: 'error/404' },// 404
{ path: '**',redirectTo: 'error/404' } // 错误 , 没有匹配到任何路径的都跳转到404
];
// ModuleWithProviders 是个接口,就是允许ngModule和providers类型
export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes,{ useHash: true });
// 上面这种写法只是把路由到处到一个变量,也就是要生效必须到相应的模块中引入(NgModule)中import进去
小技巧
// 根据是否存在id判断是新增还是修改
checkAction() {
// 用activatedRoute来获取url上对应的参数
this.activatedRoute.params.subscribe((params: { id: number }) => { if (params.id) { this.id = params.id; } else { this.showLoading = false; } }); } // 这种是直接获取queryParam this.activatedRoute.queryParams.subscribe( (res: { AlertType: string }) => { console.log(res); },(err):never => { console.log('我靠,网络错误'); } );
// 取消
back() {
// 这里判断id,url进来的带了一个关联id,比如你要查看一个用户的详细信息,根据id关联
// 在这个页面获取到这个id,然后进行的路由的相对跳转
if (this.id) {
this.router.navigate(['../../'],{ relativeTo: this.activatedRoute });
} else {
this.router.navigate(['../'],{ relativeTo: this.activatedRoute });
}
}
总结基本项目用到一丢丢都榨干出来了。。。 下一篇说点什么好,,,自定义指令?自定义管道?待我捋一捋 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |