将数据从一个组件传递到服务，然后传递到另一个组件

Question

第一个组件.ts

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

在此onRecievingResults()函数中，单击按钮后，我将输入文本保存到saveData()名为 的服务中的方法faqService。

服务.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);
        }
    );  
  }
}

在此服务中，我有 3 个方法getData()，这里我从第一个组件获取值并将其存储在另一个称为 的方法中saveData()。 getServers()方法用于发出 Http 请求。

第二个组件.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)
    ); 
    }
  }

在这里，我调用该方法getData()来获取值并从 Http 请求中获取结果。

这里的问题是它获取垃圾值并给出结果。如何动态地从输入框中获取文本并将其存储在服务中并将其传递给其他组件。

Answer 1

Observable您可以通过使用该方法创建共享服务并BehaviorSubject更新myName变量来使第二个组件了解更改next()。

服务.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);
  }

第一个组件.ts：

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

  ngOnInit(){

  }

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

第二个组件.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);
        }
      });
  }

这是plunker 演示