资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/angular4路由 知道这些就够用了

angular4路由 知道这些就够用了

caikeal / 2786人阅读

摘要：路由使用命令创建根路由模块或自己建一个路由配置文件如将文件修改为以后在这里改动配置将路由配置导出为以供调用子模块中的路由使用而不是在根模块中引入路由为特性模块定义的路由在其模块中引入路由配置路径组件路径组件懒加载子模块子模块需要配置路由设置

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

相关文章

  • Angular2 VS Angular4 深度对比：特性、性能

    摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

    孙淑建 评论0 收藏0

  • 使用Angular4动画为页面添彩

    摘要：使用组件将根据视口放置，并滑过页面。这意味着我们不能使用状态来对路由组件进行样式，因为这样可以将样式应用于父结点我们的示例中的主元素，而不是路由组件。 原文：Angular — Supercharge your Router transitions using new animation features (v4.3+) 首先我们看一下效果展示的demo Basic Variation...

    jay_tian 评论0 收藏0

  • 利用angular4和nodejs-express构建简单网站（十一）—HttpClient拦截器和

    摘要：拦截器的官方解释为拦截机制是中的主要特性之一。使用这种拦截机制，你可以声明一些拦截器，用它们监视和转换从应用发送到服务器的请求。最后调用，以便这个请求流能走到下一个拦截器，并最终传给后端处理器。 上一节介绍了好友模块，这一节介绍和好友模块中的控件有关的三个服务程序。 用HttpClient拦截器发送用户认证信息 在进入好友模块之前，需要向服务器发送认证信息，在这里使用angular的H...

    Eric 评论0 收藏0

  • 使用angular4.0来搭建一个博客类的项目

    摘要：前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功 前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...

    BakerJ 评论0 收藏0

发表评论

登陆后可评论

0条评论

caikeal

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<