Routing and angular jump in four ways by value

A routing traditional values

  Step 1 route transmission parameters must be noted that the index value to pass this case let key = index is displayed in the browser parameters corresponding to this is a question mark localhost:? 8080 / news id = 2 & name = xiaoming

<div class="z-shebei-box1 x-mysh-p"  style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
     <a [routerLink]="['/devicepay']" [queryParams]="{id:key}">
         <ul>
           <li>{{item}}</li>
         </ul>
     </a>
 </div> 

Step 2 pass over the received parameters Note: upon reception by receiving queryParams

First: introducing ActivatedRoute} {Import from  ' @ Angular / Router ' 
re: Statement: constructor ( public route: ActivatedRoute) {}
Receiving: // received value pass over 
    the this .route.queryParams.subscribe ((RES) => {
      console.log(res)
    })

 

Second, the dynamic routing traditional values may be displayed in this case is a parameter corresponding to the browser that is diagonals localhost: 8080 / news / id = 2 & name = xiaoming

Step 1 is configured in the route

 

{ path: 'devicepay/:id',component:DevicepayComponent},

 

Step 2 interface to jump html

<div class="z-shebei-box1 x-mysh-p"  style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
      <a [routerLink]="['/devicepay/',key]">
           <ul>
            <li>{{item}}</li>
         </ul>
      </a>
  </div>

 

Step 3 In another pass over the receiver interface parameters NOTE: When using a dynamic routing received params

Introducing ActivatedRoute} {Import from  ' @ Angular / Router ' 
re: Statement: constructor ( public route: ActivatedRoute) {}
Receiving: // received value pass over 
    the this . .Route the params .subscribe ((RES) => {
      console.log(res)
    })

 

Third, the dynamic js jump method is mainly used in the subject

Note that in Step 1 html passed inside the key value is an index value acquisition cycle

<Button (the Click) = ' gotoDevicePay (Key) ' > payment screen jumps to </ button>

Step 2 routing file format written as follows

{ path: 'devicepay',component:DevicepayComponent},

 

Step 3 js routing jump in

// first introduced 
Import Router {} from  ' @ Angular / Router ' 
// restatement 
constructor ( public Router: Router) {}

// define the click event 
gotoDevicePay (Key): void {
    // Jump Jump the path to achieve dynamic data
    this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
  }

 

Fourth, a number of parameters can be passed through to get to the next screen mode

Step 1 is introduced NavigationExtras

import { Router ,NavigationExtras} from '@angular/router';

 

Step 2. Define a method goNewsContent jump is executed, with NavigationExtras

goNewsContent () {
    let navigationExtras: NavigationExtras = {
    queryParams: { 'session_id': '123' },
    fragment: 'anchor'
    };
    this.router.navigate(['/news'],navigationExtras);
}

Step 3. Obtain value pass over

constructor(private route: ActivatedRoute) {
   console.log(this.route.queryParams);
}