angular中路由的使用

时间  2019-11-29
标签 angular 路由 使用 栏目 AngularJS 繁體版
原文   原文链接

1、路由的基本使用

  • 一、建立两个组件html

    ng g c components/home
ng g c components/news
复制代码

  • 二、在app-routing.module.ts中配置路由git

    const routes: Routes = [
  // 默认访问地址
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'news',
    component: NewsComponent
  },
  // 当没有匹配的时候就到home路由
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];
复制代码

  • 三、使用路由跳转shell

    <ul>
  <li>
    <a routerLink="home">首页</a>
  </li>
  <li>
    <a routerLink="news">新闻</a>
  </li>
</ul>
<!-- 路由切换的槽 -->
<router-outlet></router-outlet>
复制代码

2、几种路由跳转的方式

  • 一、方式一直接使用bootstrap

    <a routerLink="home">首页</a>
复制代码

  • 二、动态传递值的方式bash

    <a [routerLink]="[ '/home' ]">首页</a>
复制代码

3、路由选中的样式

<a routerLink="home" routerLinkActive="active">首页</a>
复制代码

4、动态路由

  • 一、配置路由文件app

    ...
{
  path: 'news',
  component: NewsComponent
},
{
  path: 'news/:id',
  component: DetailComponent
},
...
复制代码

  • 二、配置路由的跳转ide

    <ul>
  <li *ngFor="let item of articleList">
    <a [routerLink]="['/news', item.id]">{{item.title}}</a>
    <!-- <a routerLink="/news/{{item.id}}">跳转到详情</a> -->
  </li>
</ul>
复制代码

  • 三、获取动态路由传递过来的值ui

    import { ActivatedRoute } from '@angular/router';
...
private sub: any;
  constructor(private readonly route: ActivatedRoute) {}

  ngOnInit() {
    console.log(this.route);
    this.sub = this.route.params.subscribe((params: any) => {
      console.log(params);
    });
    // 或者使用snapshot是路由的一个快照【id为你写的动态路由的】
    console.log(this.route.snapshot.paramMap.get('id'));
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}
复制代码

5、使用query传递参数

  • 一、路由跳转的时候this

    <a [routerLink]="['news']" [queryParams]="{ id: 1, name: 'hello', age: 20 }" routerLinkActive="active" >新闻</a >
复制代码

  • 二、组件中获取路由参数spa

    import { ActivatedRoute } from '@angular/router';

export class NewsComponent implements OnInit, OnDestroy {
  public sub: any;
  constructor(private readonly route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.queryParams.subscribe(data => {
      console.log(data);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}
复制代码

6、在js中路由跳转

  • 一、不带参数的跳转

    import { Router } from '@angular/router';

export class DetailComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private readonly router: Router) {}

  public goHome() {
    this.router.navigate(['/home']);
  }
}
复制代码

  • 二、带参数的跳转(动态路由的方式)

    import { ActivatedRoute, Router } from '@angular/router';

export class NewsComponent implements OnInit, OnDestroy {
  constructor(private readonly router: Router) {}
  public detail(): void {
    this.router.navigate(['/news', '2']);
  }
}
复制代码

  • 三、带query参数的跳转

    import { ActivatedRoute, Router, NavigationExtras } from '@angular/router';

...
public goHome() {
  const navigationExtras: NavigationExtras = {
    // query参数
    queryParams: {
      name: 'hello',
      age: 20
    },
    fragment: 'aaa' // 锚点
  };
  this.router.navigate(['/home'], navigationExtras);
}
复制代码

7、路由的嵌套

  • 一、配置路由

    const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'add',
        component: AddComponent
      },
      {
        path: 'edit',
        component: EditComponent
      }
    ]
  },
  ...
]
复制代码

  • 二、配置路由的跳转

    <p>
  <a [routerLink]="['/home/add']" routerLinkActive="active">添加内容</a>
</p>
<p>
  <a [routerLink]="['/home/edit']" routerLinkActive="active">编辑内容</a>
</p>
复制代码

8、路由与懒加载模块

  • 一、建立两个module和对应的组件

    ng g m pages/home --routing # 建立带路由的模块
ng g m pages/user --routing
 # 建立组件
ng g c pages/home
ng g c pages/user
ng g c pages/user/login
ng g c pages/user/components/login
ng g c pages/user/components/infomation
复制代码

  • 二、主路由

    const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomeModule'
  },
  {
    path: 'userInfo',
    loadChildren: './pages/user/user.module#UserModule'
  },
  {
    path: '**',
    loadChildren: './pages/home/home.module#HomeModule'
  }
];
复制代码

  • 二、home的路由

    const routes: Routes = [
  {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full'
  },
  {
    path: 'index',
    component: HomeComponent
  },
  {
    path: '**',
    redirectTo: 'index',
    pathMatch: 'full'
  }
];
复制代码

  • 三、用户的路由

    const routes: Routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full'
  },
  {
    path: 'user',
    component: UserComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'user_info',
        component: InfomationComponent
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'user',
    pathMatch: 'full'
  }
];
复制代码

9、模块的预加载

上面对模块进行了懒加载,那么进入页面后不会所有加载出来,须要用户点击当页面后才会加载当前的数据,可是这样每每有个弊端(有些数据一开始是没有的,须要等待下才会出现)。为了解决这个等待,咱们能够进行预加载

  • 一、方式1、简单粗暴的方法(直接在根路由下使用PreloadAllModules默认是NoPreloading)

    import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
复制代码

  • 二、方式2、根据本身配置去预加载对应的模块

    • 配置本身须要预加载的路由

      const routes: Routes = [
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomeModule',
    data: { preload: true }
  },
  {
    path: 'userInfo',
    loadChildren: './pages/user/user.module#UserModule',
    data: { preload: true }
  }
];
复制代码

    • 本身建立一个my-preloading-strategy.ts

      import { Route, PreloadingStrategy } from '@angular/router';
import { Observable, of } from 'rxjs';

export class MyPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<any>): Observable<any> {
    return route.data && route.data.preload ? fn() : of(null);
  }
}
复制代码

    • 三、在根模块中注入服务中

      import { MyPreloadingStrategy } from './common/my-preloading-strategy';

/* @NgModule接受一个元数据对象，告诉angular如何编译和启动应用 */
@NgModule({
  declarations: [AppComponent], // 引入当前项目运行的组件、指令、管道
  imports: [BrowserModule, AppRoutingModule, HomeModule, UserModule], // 引入当前模块运行依赖别的模块
  exports: [], // 对外暴露出去的
  providers: [MyPreloadingStrategy], // 定义的服务
  bootstrap: [AppComponent] // 指定应用的主视图
})
export class AppModule {}
复制代码

    • 四、在根路由中使用

      @NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: MyPreloadingStrategy
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
复制代码

10、使用Location模块返回到上一个菜单

  • 一、导包

    import { Location } from '@angular/common'
复制代码

  • 二、使用

    // 返回上一级菜单
private goback(): void {
  this.location.back();
}
复制代码

11、代码下载地址

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程