Comment faire passer des valeurs entre deux composants différents en cliquant sur le bouton dans Angular 4 (sans mettre à jour l'URL de l'itinéraire)

Question

Je suis nouveau à Angular 4 et suis resté bloqué en passant des données d'un composant à un autre en cliquant sur un bouton sans utiliser AcitvatedRoute (sans passer les données dans l'URL)

Mon searchOption.component.html contient le code ci-dessous pour le bouton Envoyer:

<td><a routerLink="searchDetails"> <button id="testButton" (click)="sendVal()">Submit</button></a></td> 

Et mes searchOption.component.ts stocke le code ci-dessous:

sendVal() { 
    this.selectedAcc = this.signUpForm.form.value.accNo; 
    console.log("Account Lists3::"+this.selectedAcc); 
    this.router.navigate(['./searchDetails', this.selectedAcc]) 
} 

Mon exigence est de passer le this.selectedAcc à un autre composant searchDetails.component.ts en cliquant sur le bouton.

Answer 1

J'ai déjà répondu à une question similaire, je crois que vous trouverez la réponse ici. Angular 2 send array another page

Voici une section utile de la réponse. Avec cette approche

export class WeatherService { 
 

 
    weatherClass: Weather; 
 
    
 
    //BehaviorSubject can store the last value given until the service destroyed or otherwise changed 
 
    private data: BehaviorSubject<Weather> = new BehaviorSubject(null); 
 

 
    constructor(private http: Http) {} 
 

 
    otherWeather(city: string) { 
 
    return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response: Response) => response.json()); 
 
    } 
 
    
 
    setData(value: Weather) { 
 
    this.data.next(value); 
 
    } 
 
    
 
    getData(): Observable<Weather> { 
 
    return this.data.asObservable(); 
 
    } 
 
}

@Component({ 
 
    selector: 'app-parent', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ParentComponet implements OnInit { 
 

 
    parentData: Type = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"];; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 
    this.service.otherWeather(this.value.text).subscribe((data: Weather) => { 
 
    this.service.setData(data); 
 
    }); 
 
    } 
 

 
} 
 

 

 
@Component({ 
 
    selector: 'app-child', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ChildComponet implements OnInit { 
 

 
    childData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 
    this.service.getData.subscribe((vales: Weather) => { 
 
     this.childData = vales; 
 
    }); 
 
    } 
 

 
}

, vous remarquerez que les données ne sont pas retourné immédiatement et le code ne pas attendre pour les données. Vous devrez faire n'importe quelle logique TypeScript liée aux données dans le bloc subscribe() pour que cela fonctionne. HTML va se mettre à jour lorsque la valeur change. L'utilisation de cette méthode lorsque la valeur de BehaviorSubject change, n'importe où qui est abonnée à la méthode getData() recevra également de nouvelles données.