angular navigateByUrl vs navigate 路由跳转
import { Router, ActivatedRoute } from '@angular/router'; export class xxx{ constructor(private router: Router, private route: ActivatedRoute){} }
【有关实例教程建议:《angular教程》】
1. 不同之处
1.1 navigateByUrl()
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
第一个主要参数务必是==相对路径==的字符串数组。
this.router.navigateByUrl('/home');
他们接受的第一个主要参数不一样,第二个主要参数同样。
1.2 navigate()
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
第一个主要参数是一个二维数组
this.router.navigate(['home', 'demo'])
那样分析的路由器便是localhost:4200/home/demo
。
可以相对性当今路由器开展导航栏
传到一个relativeTo
主要参数,就可以相对性传到的路由器开展自动跳转。如当今在localhost:4200/home
,
this.router.navigate(['demo'], {relativeTo: this.route})
自动跳转后的详细地址为localhost:4200/home/demo
。
但假如'demo'
写出'/demo'
传到的路由器就失灵了,会以根路由器开展导航栏。如果不传到也是默认设置以根路由器(localhost:4200)开展导航栏。
2. 相同点:
interface NavigationExtras { relativeTo?: ActivatedRoute | null queryParams?: Params | null fragment?: string preserveQueryParams?: boolean queryParamsHandling?: QueryParamsHandling | null preserveFragment?: boolean skipLocationChange?: boolean replaceUrl?: boolean state?: {...} }
2.1 传送主要参数方法一样
以 navigate 例举
根据queryParams传参
此类传参方法会把主要参数拼凑在url上,如localhost:4200/demo?id=1
A部件传送主要参数
this.router.navigate(['demo'], {queryParams: {id: 1} , relativeTo: this.route})
B部件接受主要参数
- 若是根据
/user/:id
方法传送回来用activatedRoute.params
import { ActivatedRoute } from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.params.subscribe((param) => { console.log('部件里边的param', param);// {id :1} }); }
- 若是根据
/user?id=1
方法传送用activatedRoute.queryParams
import { ActivatedRoute } from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.queryParams.subscribe((param) => { console.log('部件里边的queryParams', param); // {id :1} }); }
根据state传参
此类方法会把数据信息存有电脑浏览器的历史数据中,state务必是一个目标,在子路由器中应用getCurrentNavigation取下。
A部件传送主要参数
import { Component, Input } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; @Component({ selector: 'a-component', template: ` <button (click)="test()">Test</button> `, }) export class AComponent { constructor(private router: Router){} test(){ const navigationExtras: NavigationExtras = {state: {id: 1}}; this.router.navigate(['b'], navigationExtras); } }
B部件接受主要参数
import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'b-component' }) export class BComponent { constructor(private router: Router) { const navigation = this.router.getCurrentNavigation(); const state = navigation.extras.state as {id: number}; // state.id 便是传出去的数据信息 } }
2.2 均有调整
this.router.navigate(['demo']).then(nav => { console.log(nav); // true: 自动跳转取得成功, false 自动跳转不成功 }, err => { console.log(err) // 产生不知所终 });
大量使用方法升级于 github:
https://github.com/deepthan/blog-angular
大量程序编写有关专业知识,请浏览:编程学习!!
以上便是浅谈Angular路由器中navigateByUrl和navigate的差别和特征的详尽具体内容,大量请关心自学java网其他相关文章!
WWW.lllT.neT声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!
原文地址:浅谈Angular路由器中navigateByUrl和navigate的差别和相同点发布于2021-12-16 16:00:01