摘要：路由使用命令创建根路由模块或自己建一个路由配置文件如将文件修改为以后在这里改动配置将路由配置导出为以供调用子模块中的路由使用而不是在根模块中引入路由为特性模块定义的路由在其模块中引入路由配置路径组件路径组件懒加载子模块子模块需要配置路由设置
angular 4 路由
使用cli命令创建根路由模块 ng g cl app.router 或自己建一个路由配置文件 如:app/app.router.ts
// app/app.router.ts
// 将文件修改为
import { RouterModule, Routes } from "@angular/router";
const routes: Routes = [
// 以后在这里改动配置
{ path: "**", pathMatch: "full", redirectTo: "" }
];
// 将路由配置导出为 appRouting 以供调用, 子模块中的路由使用 forChild 而不是 forRoot
export const appRouting = RouterModule.forRoot(routes);
在根模块中引入路由, 为特性模块定义的路由在其模块中引入
// app/app.module.ts
import { appRouting } from "./router/router.module"
// @NgModule({
// imports: [ ... ,
appRouting
// ...
路由配置
const routes: Routes = [
// path:路径 /news component:组件
{ path: "news", component: Newsomponent },
// path:路径 /detail/1 component:组件
{ path: "detail/:id", component: DetailComponent },
// 懒加载子模块, 子模块需要配置路由设置启动子组件
{ path: "other", loadChildren:"./other/other.module#otherModule" },
// 重定向
{ path: "**", pathMatch: "full", redirectTo: "" }
];
pathMatch?: string; 默认为前缀匹配 "prefix"; "full" 为完全匹配
outlet?: string; 路由目标
children?: Routes; 子路由的规则
加载路由在根组件或当前组件的模板中
多个路由区域
{ path: "news", outlet:"let1" component: NewsComponent }
{ path: "news", outlet:"let2" component: News2Cmponent }
即访问 /news/ 时同时加载 NewsComponent 和 News2Cmponent 两个组件
链接及访问detail {{news.title}} Contact
routerLinkActive="active" 即在本路由激活时添加样式 .active
或
import { Router } from "@angular/router";
// ...
constructor(private router: Router) {}
// ...
this.router.navigate(["/detail", this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);
navigateByUrl 方法指向完整的绝对路径
路由守卫适用于后台管理等需要登录才能使用的模块
创建一个认证服务
// app/auth.service.ts
import { Injectable } from "@angular/core";
import { CanActivate } from "@angular/router";
@Injectable()
export class AuthService implements CanActivate {
canActivate() {
// 这里判断登录状态, 返回 true 或 false
return true;
}
}
添加或修改路由配置
// app/app.router.ts
// 增加 CanActivate
import { CanActivate ... } from "@angular/router";
// 配置中增加 canActivate 如:
{ path: "admin", canActivate:[AuthService] ... }
退出守卫
适合于编辑器修改后的保存提示等场景
// app/deac.service.ts
import { Injectable } from "@angular/core";
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
// CanDeactivateComponent 是定义的接口,见下段代码
import { CanDeactivateComponent } from "./can-deactivate.omponent";
@Injectable()
export class DeacService implements CanDeactivate {
canDeactivate(
canDeactivateComponent: CanDeactivateComponent,
activatedRouteSnapshot: ActivatedRouteSnapshot,
routerStateSnapshot: RouterStateSnapshot
) {
// 目标路由和当前路由
console.log(activatedRouteSnapshot);
console.log(routerStateSnapshot);
// 判断并返回
return canDeactivateComponent.canDeactivate ? canDeactivateComponent.canDeactivate() : true
}
}
// can-deactivate.omponent.ts
// 接口组件, 返回 true 或 false 如表单发生改变则调用对话框服务
export interface CanDeactivateComponent {
canDeactivate: () => Observable | Promise | boolean;
}
路由配置
{
path: ...,
canDeactivate: [DeacService],
component: ...
}
模块中添加服务
providers: [ DeactivateGuardService ]
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86981.html
摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...
摘要：使用组件将根据视口放置，并滑过页面。这意味着我们不能使用状态来对路由组件进行样式，因为这样可以将样式应用于父结点我们的示例中的主元素，而不是路由组件。 原文：Angular — Supercharge your Router transitions using new animation features (v4.3+) 首先我们看一下效果展示的demo Basic Variation...
摘要：拦截器的官方解释为拦截机制是中的主要特性之一。使用这种拦截机制，你可以声明一些拦截器，用它们监视和转换从应用发送到服务器的请求。最后调用，以便这个请求流能走到下一个拦截器，并最终传给后端处理器。 上一节介绍了好友模块，这一节介绍和好友模块中的控件有关的三个服务程序。 用HttpClient拦截器发送用户认证信息 在进入好友模块之前，需要向服务器发送认证信息，在这里使用angular的H...
摘要：前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功 前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...
阅读 550·2021-11-18 10:02
阅读 1029·2021-11-02 14:41
阅读 639·2021-09-03 10:29
阅读 1876·2021-08-23 09:42
阅读 2695·2021-08-12 13:31
阅读 1175·2019-08-30 15:54
阅读 1929·2019-08-30 13:09
阅读 1414·2019-08-30 10:55
