脚本宝典收集整理的这篇文章主要介绍了angular4路由 知道这些就够用了，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

// 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; 子路由的规则

@H_540_126@

加载路由

在根组件或当前组件的模板中

PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="" tITle="" data-original-title="复制">

<router-outlet></router-outlet>

多个路由区域

  { path: 'news', outlet:'let1'  component: NewsComponent }
  { path: 'news', outlet:'let2'  component: News2Cmponent }

<router-outlet name="let1"></router-outlet>
<router-outlet name="let2"></router-outlet>

即访问 /news/ 时同时加载 NewsComponent 和 News2Cmponent 两个组件

链接及访问

<a routerLink="/detail/1" routerLinkActive="active">detail</a>
<a [routerLink]="['/detail', news.id]">{{news.title}}</a>
<a [routerLink]="[{ outlets: { let2: ['news'] } }]">Contact</a>

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] ... }

退出守卫

适合于编辑器修改后的保存提示等场景

StateSnapshot } 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 } }" title="" data-original-title="复制">

// 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<CanDeactivateComponent> {
  canDeactivate(
    canDeactivateComponent: CanDeactivateComponent,
    activatedRouteSnapshot: ActivatedRouteSnapshot,
    routerStateSnapshot: RouterStateSnapshot
  ) {
    // 目标路由和当前路由
    console.log(activatedRouteSnapshot);
    console.log(routerStateSnapshot);

    // 判断并返回
    return canDeactivateComponent.canDeactivate ? canDeactivateComponent.canDeactivate() : true

  }
}

Promise | boolean; }" title="" data-original-title="复制">

// can-deactivate.omponent.ts

// 接口组件, 返回 true 或 false 如表单发生改变则调用对话框服务
export interface CanDeactivateComponent {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

路由配置

{
  path: ...,
  canDeactivate: [DeacService],
  component: ...
}

模块中添加服务

providers: [
  DeactivateGuardService
]

脚本宝典总结

以上是脚本宝典为你收集整理的angular4路由 知道这些就够用了全部内容，希望文章能够帮你解决angular4路由 知道这些就够用了所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。