Comment passer les données de connexion à l'état suivant dans Angular 4?

Question

Je travaille dans Angular 4. Ici, j'ai créé un état de connexion et j'ai besoin de passer les informations de connexion à l'état suivant sur l'état de changement dans le bloc de succès. En Angularjs, en utilisant stateParams nous pouvons implémenter celui-ci. Mais je ne sais pas comment le faire dans Angular 4. Comment puis-je implémenter celui-ci dans Angular 4?

Ci-dessous mon code:

import { Component, OnInit } from '@angular/core'; 
 
import {Http,Response,Headers, RequestOptions} from '@angular/http'; 
 
import { Router} from '@angular/router'; 
 
import { 
 
    ReactiveFormsModule, 
 
    FormsModule, 
 
    FormGroup, 
 
    FormControl, 
 
    Validators, 
 
    FormBuilder, 
 
    AbstractControl, 
 
    ValidatorFn, 
 
} from '@angular/forms'; 
 
import { NgForm } from '@angular/forms'; 
 

 
@Component({ 
 
    selector: 'app-login', 
 
    templateUrl: './login.component.html', 
 
    styleUrls: ['./login.component.css'] 
 
}) 
 
export class LoginComponent implements OnInit { 
 

 
constructor(private router:Router,private http:Http) { } 
 
signup(){ 
 
    this.router.navigate(['register']); 
 
} 
 

 
createAuthorizationHeader(headers: Headers) { 
 
    headers.append('Authorization', 'Basic ' + 
 
     btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901')); 
 
    headers.append("Content-Type", "application/json"); 
 
    } 
 
onSubmit(userForm:NgForm){ 
 
    console.log(userForm.value); 
 
    let headers=new Headers(); 
 
    this.createAuthorizationHeader(headers); 
 
const body={ 
 
"username": userForm.value.email, 
 
    "password": userForm.value.password 
 
} 
 
    console.log(body); 
 
    console.log(headers); 
 
this.http.post('https://www.colourssoftware.com/wordpress/wp-json/jwt-auth/v1/token',body,{ 
 
     headers:headers 
 
     }) 
 
     .subscribe(
 
     data => { 
 
       console.log(data); 
 
      this.router.navigate(['home']); 
 
      }, 
 
      err => { 
 
       console.log("ERROR!: ", err); 
 
      } 
 
    ); 
 

 
} 
 

 
    ngOnInit() { 
 
    } 
 

 
}

<div class="breadcrumbs"> 
 
     <div class="container"> 
 
      <ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s"> 
 
       <li><a href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</a></li> 
 
       <li class="active">Login Page</li> 
 
      </ol> 
 
     </div> 
 
    </div> 
 
    <!-- //breadcrumbs --> 
 
    <!-- login --> 
 
    <div class="login"> 
 
     <div class="container"> 
 
      <h3 class="animated wow zoomIn" data-wow-delay=".5s">Login Form</h3> 
 
      <p class="est animated wow zoomIn" data-wow-delay=".5s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <div class="login-form-grids animated wow slideInUp" data-wow-delay=".5s"> 
 
       <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)"> 
 
        <input type="email" placeholder="Email Address" required=" " name="email" ngModel> 
 
        <input type="password" placeholder="Password" required=" " name="password" ngModel> 
 
        <div class="forgot"> 
 
         <a href="#">Forgot Password?</a> 
 
        </div> 
 
        <input type="submit" value="Login"> 
 
       </form> 
 
      </div> 
 
      <h4 class="animated wow slideInUp" data-wow-delay=".5s">For New People</h4> 
 
      <p class="animated wow slideInUp" data-wow-delay=".5s"><a (click)="signup()">Register Here</a> (Or) go back to <a routerLink="/home">Home<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></p> 
 
     </div> 
 
    </div>

Answer 1

Vous pouvez le faire comme ça dans router.navigate:

this.router.navigate(['/home'], { queryParams: { param: 'value' } }); 

Ou simplement:

this.router.navigate(['/home'], param); 

Et vous pouvez les obtenir dans un autre composant comme observable, comme ceci:

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
/* other imports */ 

@Component({ 
    /* selector, template and so on */ 
}) 

export class YourComponent implements OnInit { 
    constructor(
    private route: ActivatedRoute 
) {} 

    ngOnInit() { 
    this.route.params.subscribe(params => { 
     console.log(params); 
    }); 
    } 
} 

Answer 2

Ajouter à votre composant actuel

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

et vous pouvez vous inscrire dans le composant cible:

constructor(private _route:ActivatedRoute){} 

this._route.params.subscribe(params => { 
    console.log(params); 
});