Angular Routes

Presents the routing

Route Configuration

1. Add to the entry file index.html

<base href = "/">
Copy the code

2. Import and configure the routing library in app.modules.ts

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
    {path: 'hello'.component: HelloWorldComponent},
    {path: 'helloeveryone'.component: HelloEveryoneComponent}
]

@NgModule({
  declarations: [ AppComponent, ... ] .imports: [
      ...,
    RouterModule.forRoot(appRoutes)
  ],
})
Copy the code

Debug mode can be set

RouterModule.forRoot(appRoutes, {enableTracing: true})
Copy the code

3. A routed connection, set up on app.component.html, is actually a jump to menu A TAB

<nav>
    <a routerLink = '/hello'>/hello</a>
    <a routerLink = '/helloevery'>/helloevery</a>
</nav>
<router-outlet></router-outlet>
Copy the code

Router-outlet is a router outlet that displays the switching components

4. Wildcard setting ‘**’

Wildcard characters can be used when some paths have no corresponding component

const appRoutes: Routes = [
    {path: 'hello'.component: HelloWorldComponent},
    {path: 'helloeveryone'.component: HelloEveryoneComponent},
    {path: '* *'.component: PageNotFoundComponent}
]
Copy the code

5. Redirected routing

const appRoutes: Routes = [
    {path: 'hellotest'.redirectTo: '/hello'.pathMatch: 'full'},]Copy the code

Parameters of the routing

1. A single parameter

Configure the routing

{path: 'routerParam/:id'.component: RouterParamComponent}
Copy the code

Access to the routing

<a roterLink = 'routerParam/12' routerLinkActive = 'active'>routerParam/12</a>
Copy the code

To obtain parameters

import { Router, ActivatedRouter, ParaMap} from '@angular/router'; .constructor(private route: ActivatedRouter){}onDoCheck() {
    this.id = this.route.snapshot.paramMap.get("id")

Copy the code

2. Multiple parameters are encapsulated as objects

Configure the routing

{path: 'routerParam'.component: RouterParamComponent}
Copy the code

<a
  [routerLink]="['news']"
  [queryParams]="{ id: 1, name: 'hello', age: 20 }"
  routerLinkActive="active"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

To obtain parameters

import {ActivatedRouter} from '@angular/router'; .constructor(private route: ActivatedRouter){}ngOnInit() {
    this.sub = this.route.queryParams.subscribe(data= > {
      console.log(data);
    });
}

Copy the code

Nested routing

1. Nested routing

{path: 'hello'.component: RouterParamComponent,
children: [{path: 'helloeveryone'.component: HelloEveryoneComponent},// Access hello/helloeveryone
	{path: 'helloworld'.component: HelloWorldComponent}, // Access helloWorld]}Copy the code

The child component is rendered in the parent route

Routing module

1. Create app-routing.modules.ts under /app to contain the routing module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; .// Reference the component that needs to be routed
import { HeroChildComponent } from './hero-child.component';
import { HeroParentComponent } from './hero-parent.component';

// I don't need to configure declarations as above. @NgModule({imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule/ / * * * *]})export class AppRoutingModule {}Copy the code

2. Referenced in app.modules.ts

import { AppRoutingModule } from './app-routing.module';// Import the routing module. @NgModule({declarations: [
    AppComponent,
    TestComponent,
    ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
})
Copy the code

Functional routing

1. navigateByUrl()

<button (click) = > "helloUrl()">test</button>
Copy the code

/ / introduction
import {Router} from '@angular/router';
// dependency injection
constructor(
private router: Router){})helloUrl() {
this.router.navigateByUrl('hello');/ / path/hello
//this.router.navigateByUrl('hello', {skipLocationChange: true});
}

Copy the code

The {skipLocationChange: true} property indicates that the page jumps but does not change

2. navigate()

helloUrl() {
this.router.navigate(['hello']);/ / path/hello
}
Copy the code

NavigateByUrl is call,navigateByUrl is apply

3. Routing and the cords

Multiple parameters

this.router.navigate(['/detail'] and {queryParams: {'name':'nihao'}})
this.router.navigateByUrl('/detail', {queryParams: {'name':'nihao'}});
Copy the code

A single parameter

this.router.navigateByUrl('hello/12');
this.router.navigate(['hello'.'13']);
Copy the code