zoukankan      html  css  js  c++  java
  • Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习。

    官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html

    在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到。

    首先路由配置Route:

     1 import { NgModule }             from '@angular/core';
     2 import { RouterModule, Routes } from '@angular/router';
     3  
     4 import { HomeComponent }   from './home.component';
     5 import { LoginComponent }      from './login.component';
     6 import { RegisterComponent }  from './register.component';
     7  
     8  const routes: Routes = [
     9    { path: '', redirectTo: '/home', pathMatch: 'full' },
    10    { path: 'home',  component: HomeComponent },
    11    { path: 'login', component: LoginComponent },
    12    { path: 'heroes',     component: RegisterComponent }
    13  ];
    14  
    15  @NgModule({
    16    imports: [ RouterModule.forRoot(routes) ],
    17    exports: [ RouterModule ]
    18  })
    19  export class AppRoutingModule {}
    View Code

    其次路由跳转Router.navigate

    1 navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
     1 interface NavigationExtras {
     2     relativeTo : ActivatedRoute
     3     queryParams : Params
     4     fragment : string
     5     preserveQueryParams : boolean
     6     queryParamsHandling : QueryParamsHandling
     7     preserveFragment : boolean
     8     skipLocationChange : boolean
     9     replaceUrl : boolean
    10 }
    View Code

    1.以根路由跳转/login

    this.router.navigate(['login']);

    2.设置relativeTo相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute

    this.router.navigate(['login', 1],{relativeTo: route}); 

    3.路由中传参数 /login?name=1

    this.router.navigate(['login', 1],{ queryParams: { name: 1 } }); 

    4.preserveQueryParams默认值为false,设为true,保留之前路由中的查询参数/login?name=1 to /home?name=1

    this.router.navigate(['home'], { preserveQueryParams: true }); 

    5.路由中锚点跳转 /home#top

     this.router.navigate(['home'],{ fragment: 'top' });

    6.preserveFragment默认为false,设为true,保留之前路由中的锚点/home#top to /role#top

    this.router.navigate(['/role'], { preserveFragment: true }); 

    7.skipLocationChange默认为false,设为true,路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效

    this.router.navigate(['/home'], { skipLocationChange: true });

    8.replaceUrl默认为true,设为false,路由不会进行跳转

    this.router.navigate(['/home'], { replaceUrl: true }); 

    还有好多好多东西需要学习,关于跳转就先写到这里了,希望大家共同学习分享踏过的坑。

  • 相关阅读:
    JobScheduler调度器过程(JobSchedulerService的启动过程)
    Android 9 新功能 及 API 介绍(提供了实用的模块化的功能支持,包括 人工智能)
    好用的在线工具汇总:Iconfont图标,数据mock,时间函数库,颜色查询 等
    前端编码规范小记
    android自定义控件 几种方式总结
    App开发如何利用Fidder,在api接口还没有实现的情况下模拟数据,继续开发
    WebView一般用法总结
    360等杀掉了app的主进程后 ,如何自动开启 如何防止被kill
    android内存优化
    dp跟px的互相转换
  • 原文地址:https://www.cnblogs.com/ZHF/p/6971901.html
Copyright © 2011-2022 走看看