Arrange learning notes of angular4 route usage of angular4

This chapter talks about the routing of angular

Let's talk about how to introduce angular routing. In the beginning, the new angular project has its routing configured for you, but it depends on app.module.ts

1. First, the routing module should be introduced at the top

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

2. Then add something to ngModule

3. This routeConfig needs to be defined by itself. The type of Routes is angular routing configuration

const routeConfig: Routes = [
  {path: '' , component : HomeComponent},
]

Of course, routing configuration can also be extracted

Introduction to routing configuration

1. Common jump

const routeConfig: Routes = [
  {path: '' , component : HomeComponent}, //path by''The first page is
  {path: 'chat',component: ChatComponent,},//Visit home address+/chat    Access to chat assembly
  {path: 'au/:id',component: AuComponent},//Route param Biography
  {path: '**',component: Code404Component} //Unmatched routes by ** matching
]

The receiver component of the third route parameter needs to add more points to get the parameter
1. First introduce

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

2. Inject the routing service into the constructor

constructor(private routeInfo: ActivatedRoute) { }

3. Get param parameter

There are two ways to get param
The first is snapshot parameter snapshot

ngOnInit() {
    //constructor Created only once ngOnInit，therefore this.routeInfo.snapshot.params['id']The value of will not change
    this.productId = this.routeInfo.snapshot.params['id'];
  }

But there's a problem
If you have requested localhost:4200/au/6 and then localhost:4200/au/8, it is equivalent to that the parameters of the same route jump are only different, then the param number you get for the second time is the first 6
Reason

When the constructor is created, ngOnInit will be created only once, so the value of this.routeInfo.snapshot.params['id '] will not change

So more parameters are obtained and the second parameter subscription method is recommended

ngOnInit() {
    this.routeInfo.params.subscribe((params: Params) => this.productId = params.id);
}

How to jump parameters is right. Use the second one

Sub route

Only the first layer route can't meet the development requirements obviously, so the sub route can be configured again

 {
    path: 'product',
    component: ProductComponent,
    children: [
      {
        path: 'childA', component: ChildAComponent
      },
      {
        path: 'childB', component: ChildBComponent
      }
    ]
  }

But it still doesn't work·
When a button to jump to the child route is added to the parent component html

<a [routerLink]="['./childA']" >salesperson A</a>
<a [routerLink]="['./childB']" >salesperson B</a>

Note that you can't add / because the slash points to the root path and. / points to the relative path

Redirection Route

Use redirectTo

const routes: Routes = [{
  path: '',
  redirectTo: 'home/6',
  pathMatch: 'full' 
}]

Secondary route

It is a socket. The auxiliary route is configured through different outlets, so that the router outlet label of the page displays different contents
Routing configuration

const routes: Routes = [{//Secondary route points to ChatComponent Component, socket name aux
  path: 'chat',
  component: ChatComponent,
  outlet: 'aux'
}]

html code referring to socket

<a [routerLink]="[{outlets:{primary:'home/2',aux:'chat'}}]" ></a>
<a [routerLink]="[{outlets:{aux:null}}]" ></a><!--No reference to secondary route-->
<router-outlet></router-outlet> <!--Where the plug-in content is displayed-->

Someone should ask the first line, what's the matter with primary
The change of the secondary route will only change the content of the socket, and will not affect the primary route
For example, the original path is
http://localhost:4200/home/0
Now if the a tag of [routerLink]="[{outlets:{aux:'chat'}]" is selected, only the secondary route will be changed, and the path will be
http://localhost:4200/home/0(aux:chat)
Only when the primary:'home/2' is added, the primary route will change to http://localhost:4200/home/2(aux:chat)
Hop back and forth with the main route to kill the auxiliary route. Use the second line

Route guard

Routes that can only be entered if the user has logged in or has some permissions
canActive
1. Write a guard class to inherit the CanActivate interface

import {CanActivate} from '@angular/router';
export class LoginGuard implements CanActivate {
canActivate() {
  let loginedIn: boolean = Math.random() < 0.5;
    if (!loginedIn) {
      console.log('User not logged in');
    }
    return loginedIn;
  }
}

This is the difference between CanDeactivate and canActivate. If it wants to leave a component, it needs to protect that component and inject that component as well

export class UnsaveGuard implements CanDeactivate<ProductComponent>{
canDeactivate (component: ProductComponent) {
  return window.confirm('Leave or not');
}

Both returns should be boolean
2. Add configuration in routing configuration
canActivate can configure an array during route configuration. angular will call the items in the array at a time. Once false is returned, the login operation will be terminated

{
path: 'product',
component: ProductComponent,
canActivate: [loginGuard],
canDeactivate: [UnsaveGuard]
}

Add the service to the service

@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [LoginGuard, UnsaveGuard],
exports: [RouterModule]
})

Route guard is very important. Another reference article I found on the Internet
http://blog.csdn.net/qq451354/article/details/54017466

Posted by g.grillo on Mon, 20 Apr 2020 21:36:46 -0700

Programmer Group