Jump navigation of Router class in Angular4-JS Tutorial-php.cn

Jump navigation of Router class in Angular4

不言

Release： 2018-05-05 15:57:50

Original

2707 people have browsed it

This article mainly introduces the detailed explanation of the jump navigation of the Router class in Angular4. It has certain reference value. Interested friends can refer to it.

I have been learning angular4 recently. It is indeed better than There have been great changes and improvements in the past, but many places are not so easy to understand. Fortunately, the official documents and examples are in Chinese, which is still very helpful for those who are not good at English.

In the process of learning, the routing (router) mechanism is inseparable and is used in many places.

First route configuration Route:

import { NgModule }       from &#39;@angular/core&#39;;
import { RouterModule, Routes } from &#39;@angular/router&#39;;
 
import { HomeComponent }  from &#39;./home.component&#39;;
import { LoginComponent }   from &#39;./login.component&#39;;
import { RegisterComponent } from &#39;./register.component&#39;;
 
 const routes: Routes = [
  { path: &#39;&#39;, redirectTo: &#39;/home&#39;, pathMatch: &#39;full&#39; },
  { path: &#39;home&#39;, component: HomeComponent },
  { path: &#39;login&#39;, component: LoginComponent },
  { path: &#39;heroes&#39;,   component: RegisterComponent }
 ];
 
 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

Copy after login

Secondly route jump Router.navigate

 navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>

Copy after login

 interface NavigationExtras {
  relativeTo : ActivatedRoute
  queryParams : Params
  fragment : string
  preserveQueryParams : boolean
  queryParamsHandling : QueryParamsHandling
  preserveFragment : boolean
  skipLocationChange : boolean
  replaceUrl : boolean
}

Copy after login

1. Jump to /login with the root route

this.router.navigate([&#39;login&#39;]);

Copy after login

2.Settings relativeTo jumps relative to the current route. route is an instance of ActivatedRoute. To use it, you need to import ActivatedRoute

this.router.navigate([&#39;login&#39;, 1],{relativeTo: route});

Copy after login

3. Pass the parameter /login?name=1## in the route.

this.router.navigate([&#39;login&#39;, 1],{ queryParams: { name: 1 } });

Copy after login

4.preserveQueryParams default value is false, set to true, retain the query parameters /login?name=1 to /home?name=1# in the previous route

this.router.navigate([&#39;home&#39;], { preserveQueryParams: true });

Copy after login

5. Anchor jump in routing /home#top

 this.router.navigate([&#39;home&#39;],{ fragment: &#39;top&#39; });

Copy after login

6 .preserveFragment defaults to false, set to true, and retains the anchor point /home#top to /role#top

this.router.navigate([&#39;/role&#39;], { preserveFragment: true });

Copy after login

7.skipLocationChange defaults to false, set to true, the url in the browser will remain unchanged when the route jumps, but the parameters passed in are still valid

this.router.navigate([&#39;/home&#39;], { skipLocationChange: true });

Copy after login

8.replaceUrl default is true, set to false, the route will not jump

this.router.navigate([&#39;/home&#39;], { replaceUrl: true });

Copy after login

The above is the detailed content of Jump navigation of Router class in Angular4. For more information, please follow other related articles on the PHP Chinese website!