Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the difference between navigateByUrl and navigate in Angular routing". In daily operation, I believe many people have doubts about the difference between navigateByUrl and navigate in Angular routing. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what is the difference between navigateByUrl and navigate in Angular routing?" Next, please follow the editor to study!

Angular navigateByUrl vs navigate route jumps to import {Router, ActivatedRoute} from'@ angular/router';export class xxx {constructor (private router: Router, private route: ActivatedRoute) {}} 1. Difference 1.1 navigateByUrl () navigateByUrl (url: string | UrlTree, extras: NavigationExtras = {skipLocationChange: false}): Promise

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

The first parameter is an array

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

Then the parsed route is localhost:4200/home/demo.

Can navigate relative to the current route

Pass a relativeTo parameter, which can be redirected relative to the incoming route. Such as currently in localhost:4200/home

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

The address after the jump is localhost:4200/home/demo.

However, if the incoming route of 'demo' written' / demo' does not work, it will be navigated by the root route. If it is not passed in, the root route (localhost:4200) is used for navigation by default.

two。 What they have in common: interface NavigationExtras {relativeTo?: ActivatedRoute | null queryParams?: Params | null fragment?: string preserveQueryParams?: boolean queryParamsHandling?: QueryParamsHandling | null preserveFragment?: boolean skipLocationChange?: boolean replaceUrl?: boolean state?: {...}} 2.1 parameters are passed in the same way

Take navigate as an example

Transfer parameters through queryParams

This parameter passing method splices the parameters to url, such as localhost:4200/demo?id=1.

A component passes parameters

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

B component receives parameters

If it is 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 in the component); / / {id: 1}});}

If the activatedRoute.queryParams is passed through / user?id=1 mode

Import {ActivatedRoute} from'@ angular/router';constructor (private activatedRoute: ActivatedRoute) {this.activatedRoute.queryParams.subscribe ((param) = > {console.log ('queryParams', param in the component); / / {id: 1}});} pass parameters through state

In this way, the data is stored in the browser's history, and the state must be an object that is taken out using getCurrentNavigation in the child route.

A component passes parameters

Import {Component, Input} from'@ angular/core';import {Router, NavigationExtras} from'@ angular/router';@Component ({selector:'a template: `Test `,}) export class AComponent {constructor (private router: Router) {} test () {const navigationExtras: NavigationExtras = {state: {id: 1}; this.router.navigate (['b'], navigationExtras);}}

B component receives parameters

Import {Component} from'@ angular/core';import {Router} from'@ angular/router';@Component ({selector: 'bMeritor'}) export class BComponent {constructor (private router: Router) {const navigation = this.router.getCurrentNavigation (); const state = navigation.extras.state as {id: number} / / state.id is the incoming data}} 2.2 all have callback this.router.navigate (['demo']) .then (nav = > {console.log (nav); / / true: jump successfully, false jump failed}, err = > {console.log (err) / / loss occurs})

At this point, the study on "what is the difference between navigateByUrl and navigate in Angular routing" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.