Detailed explanation of examples of routing Router class in Angular4

I have been learning angular4 recently. It has indeed undergone great changes and improvements than before. Many places are not so easy to understand. Fortunately, the official documents and examples are in Chinese. If you are not good at English, there are still some Very helpful to study.

Official address:

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

First route configuration Route:

 1 import { NgModule }             from '@angular/core'; 2 import { RouterModule, Routes } from '@angular/router'; 3   4 import { HomeComponent }   from './home.component'; 5 import { LoginComponent }      from './login.component'; 6 import { RegisterComponent }  from './register.component'; 7   8  const routes: Routes = [ 9    { path: '', redirectTo: '/home', pathMatch: 'full' },10    { path: 'home',  component: HomeComponent },11    { path: 'login', component: LoginComponent },12    { path: 'heroes',     component: RegisterComponent }13  ];14  15  @NgModule({16    imports: [ RouterModule.forRoot(routes) ],17    exports: [ RouterModule ]18  })19  export class AppRoutingModule {}

View Code

Secondly route jump Router. navigate

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

##

 1 interface NavigationExtras { 2     relativeTo : ActivatedRoute 3     queryParams : Params 4     fragment : string 5     preserveQueryParams : boolean 6     queryParamsHandling : QueryParamsHandling 7     preserveFragment : boolean 8     skipLocationChange : boolean 9     replaceUrl : boolean10 }

View Code

#1. Jump to /login with the root route

this.router.navigate(['login']);

2. Set relativeTo to jump relative to the current route. route is an instance of ActivatedRoute. You need to import ActivatedRoute

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

3. Pass the parameter /login?name=1

# in the route

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

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(['home'], { preserveQueryParams: true });

5. The anchor point jumps to /home#top

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

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

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

7.skipLocationChange defaults to false. If 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(['/home'], { skipLocationChange: true });

8.replaceUrl defaults to true, if set to false, the route will not jump

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

There are still many things to learn , I will write about the jump here first. I hope everyone can learn and share the pitfalls they have overcome.

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