本篇文章给大家对比一下Angular路由中navigateByUrl和navigate，看看他们的不同点和共同点，希望对大家有所帮助！
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的区别和共同点的详细内容，更多请关注AdminJS其它相关文章！