大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍“Angular路由中navigateByUrl和navigate的区别有哪些”,在日常操作中,相信很多人在Angular路由中navigateByUrl和navigate的区别有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular路由中navigateByUrl和navigate的区别有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联是专业的五家渠网站建设公司,五家渠接单;提供做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行五家渠网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
import { Router, ActivatedRoute } from '@angular/router'; export class xxx{ constructor(private router: Router, private route: ActivatedRoute){} }
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise
第一个参数必须是==绝对路径==的字符串。
this.router.navigateByUrl('/home');
他俩接收的第一个参数不同,第二个参数相同。
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise
第一个参数是一个数组
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)进行导航。
interface NavigationExtras { relativeTo?: ActivatedRoute | null queryParams?: Params | null fragment?: string preserveQueryParams?: boolean queryParamsHandling?: QueryParamsHandling | null preserveFragment?: boolean skipLocationChange?: boolean replaceUrl?: boolean state?: {...} }
以 navigate 举例
此种传参方式会把参数拼接在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必须是一个对象,在子路由中使用getCurrentNavigation取出。
A组件传递参数
import { Component, Input } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; @Component({ selector: 'a-component', template: ` `, }) 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 就是传过来的数据 } }
this.router.navigate(['demo']).then(nav => { console.log(nav); // true: 跳转成功, false 跳转失败 }, err => { console.log(err) // 发生无措 });
到此,关于“Angular路由中navigateByUrl和navigate的区别有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!