angular - Sende data fra en komponent til en tjeneste og deretter til en annen komponent

Første Komponent.ts

onRecievingResults(value){
    console.log(value);
    this.faqService.saveData(value);
    console.log(value);
    this.router.navigate(['results'], {relativeTo: this.route});}
}

I denne onRecievingResults()-funksjonen, ved klikk på en knapp, lagrer jeg inndataen til en metode saveData() i en tjeneste kjent som faqService.

Service.ts

saveData(value){
    console.log("save data function called " + value + this.sharingData.name);
    this.sharingData.name;
}
getData()
{
    console.log('get Data function called ');
    return this.sharingData.name;
}
getServers(name){
    return this.http.get(Staticdata.apiBaseUrl + "/2.2/search/advanced?key="+ Staticdata.key +"&access_token="+ Staticdata.access_token +"&/2.2/search/advanced?order=desc&sort=activity&accepted=True&closed=True&title=" + name + Staticdata.redirectUrl + "&filter="+ Staticdata.filters)
        .map(
        (response: Response) => {
            const items = response.json();
            return items;
        },
    )
    .catch(
        (error: Response) => {
            return Observable.throw(error);
        }
    );  
  }
}

I denne tjenesten har jeg 3 metoder getData(), her henter jeg verdien fra den første komponenten og lagrer den i en annen metode kjent som saveData(). getServers()-metoden brukes til å gjøre Http-forespørsel.

Andre component.ts

export class SearchResultsComponent implements OnInit {

 data: any[];   
 item: any[];
 myName:any;

 constructor(private service: FaqService) {
  this.service =  service;
  console.log('back called');
  this.myName = service.getData();  
  console.log(this.myName);
 }

 ngOnInit() {
  this.service.getServers(this.myName)
        .subscribe(
        (data) => {
            this.item= data.items;
            console.log(this.item);
        },
        (error) => console.log(error)
    ); 
    }
  }

Her i dette kaller jeg metoden getData() for å hente verdien og få resultatene fra Http-forespørselen.

Problemet her er at det tar søppelverdier og gir resultatene. Hvordan kan man dynamisk hente tekst fra inputboks og lagre det i tjenesten og sende det til den andre komponenten.

Svar #1

Du kan gjøre den andre komponenten oppmerksom på endringer ved å opprette en delt tjeneste ved bruk av Observable og BehaviorSubject og oppdatere myName-variabelen ved å bruke next()-metoden.

service.ts:

  sharingData = { name: " " };

  // Observable string source
  private dataStringSource = new BehaviorSubject<string>();

  // Observable string stream
  dataString$ = this.dataStringSource.asObservable();

  constructor(private http: Http) { }

  public saveData(value){
    console.log("save data function called " + value + this.sharingData.name);
    this.sharingData.name = value;
    this.dataStringSource.next(this.sharingData.name);
  }

first.component.ts:

  constructor(private router: Router, private faqService: FaqService){ }

  ngOnInit(){

  }

  onRecievingResults(value){
    console.log(value);
    this.faqService.saveData(value);
    this.router.navigate(['results']);
  }

second.component.ts:

item: any[];
myName:any;

  constructor(private router: Router, private service: FaqService){

    this.service.dataString$.subscribe(
      data => {
        if(this.myName !== data){
          this.myName = data;
          this.getServersData(this.myName);
        }
      });
  }

Dette er plunker-demonstrasjonen

Relaterte artikler