大佬教程收集整理的这篇文章主要介绍了angular4路由 知道这些就够用了,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用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: '**',redirectTo: '' } ];
在根组件或当前组件的模板中
<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 }}]);
创建一个认证服务
// 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<CanDeactivateComponent> { 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<Boolean> | Promise<Boolean> | Boolean; }
路由配置
{ path: ...,canDeactivate: [Deacservice],component: ... }
模块中添加服务
providers: [ DeactivateGuardservice ]
以上是大佬教程为你收集整理的angular4路由 知道这些就够用了全部内容,希望文章能够帮你解决angular4路由 知道这些就够用了所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。