js太多,就会http请求很多
js少,单个文件又太大
这需要设计者权衡
——————————————————
模块和共享模块
共享模块:SharedModule和PostSharedModule
导入到manage和user模块
——————————————————————
模块懒加载
loadChildren点到路径的时候才加载这个模块,异步加载
第三种组件传递参数,路由
<a [routerLink]="['/manage/usertable/edituser',1]"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
manage.routes.ts
{ path: 'usertable/edituser/:userId',component: UserProfileComponent },
接收
constructor(public router: Router,
public activeRoute: ActivatedRoute) {
}
ngOnInit() {
this.form = this.toFormGroup(this.fields);
this.activeRoute.params.subscribe(
params => { console.log(params) }
);
}
——————————————————————————————————————————
N层嵌套的路由
manage.routes.ts设置路由
children: [
{ path: '',redirectTo:'posttable/page/1',pathMatch:'full'},
{ path: 'posttable/page/:page',component: PostTableComponent },
{ path: 'commenttable/page/:page',component: CommentTableComponent },
{ path: 'usertable/page/:page',component: UserTableComponent },
{ path: 'usertable/edituser/:userId',
{ path: 'usertable/newuser',
{ path: 'sysparam',component: SysParamComponent },
{ path: '**',redirectTo:'posttable/page/1' }
]
—————————————————————————————————————
路由守卫:
做一些安全防护,判断有没有权限进入指定路由
肯定是向后端发送个请求看是否有权限进入这个页面
canActivate: [AuthGuard],
————————————————————————————————
路由两种方式:带#号的hash,restful风格的路径,需要利用h5的PushState,需要服务端适当的配置