A brief analysis of the differences and commonalities between navigateByUrl and navigate in Angular routing

This article will compare navigateByUrl and navigate in Angular routing to see their differences and commonalities. I hope it will be helpful to everyone!

angular navigateByUrl vs navigate route jump

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

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute）{} 
}

[Related tutorial recommendation: "angular tutorial" 】

1. Differences

1.1 navigateByUrl()

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

The first parameter must be a string of == absolute path==.

 this.router.navigateByUrl('/home');

The first parameter they receive is different, and the second parameter is the same.

1.2 navigate()

navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

The first parameter is an array

this.router.navigate(['home', 'demo'])

Then the parsed route islocalhost:4200/home/demo.

You can navigate relative to the current route

Pass in a relativeTo parameter to jump relative to the incoming route. For example, currently in localhost:4200/home, the address after

this.router.navigate(['demo'], {relativeTo: this.route})

jumps is localhost:4200/home/demo.

But if 'demo' is written as '/demo', the incoming route will not work, and the root route will be used for navigation. If not passed in, the root route (localhost:4200) will be used for navigation by default.

2. Common points:

interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  preserveQueryParams?: boolean
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}

2.1 The method of passing parameters is the same

Take navigation as an example

Passing parameters through queryParams

This method of passing parameters will splice the parameters on the url, such as localhost:4200/demo?id=1

A component Pass parameters

this.router.navigate(['demo'], {queryParams: {id: 1} , relativeTo: this.route})

B component receives parameters

• If passed through /user/:id, use activatedRoute.params

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

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((param) => {
      console.log('组件里面的param', param);// {id :1}
    });
}

• If passed through /user?id=1, use activatedRoute.queryParams

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

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((param) => {
      console.log('组件里面的queryParams', param); // {id :1}
    });
}

Passing parameters through state

This method will store the data in the browser's history. The state must be an object and be retrieved using getCurrentNavigation in the sub-route.

A component passes parameters

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([&#39;b&#39;], navigationExtras);
  }
}

B component receives parameters

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 Both have callbacks

 this.router.navigate(['demo']).then(nav => {
    console.log(nav); // true: 跳转成功， false 跳转失败
  }, err => {
    console.log(err) // 发生无措
  });

More usage updates on github:

https://github.com/deepthan/blog-angular

For more programming-related knowledge, please visit:ProgrammingIntroduction! !

The above is the detailed content of A brief analysis of the differences and commonalities between navigateByUrl and navigate in Angular routing. For more information, please follow other related articles on the PHP Chinese website!