Передача данных из компонента в службу, а затем в другой компонент

First Component.ts

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

В этой onRecievingResults() функции при нажатии кнопки я сохраняю введенный текст в метод saveData() в службе, известной как 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);
        }
    );  
  }
}

В этой службе у меня есть 3 метода getData(), здесь я получаю значение из первого компонента и сохраняю его в другом методе, известном как saveData(). getServers() используется для выполнения HTTP-запроса.

Второй 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)
    ); 
    }
  }

Здесь я вызываю метод getData(), чтобы получить значение и результаты HTTP-запроса.

Проблема здесь в том, что он принимает ненужную ценность и дает результаты. Как динамически брать текст из поля ввода, сохранять его в службе и передавать другому компоненту.


typescript angular observable angular-components angular-services
person Samson Maben    schedule 02.08.2017    source источник
comment
Посмотрите, поможет ли этот ответ :)   -  person Nehal    schedule 02.08.2017
comment
Как мне сообщить второму компоненту, что данные были обновлены, и дать результаты для этого. Здесь он принимает неопределенные значения и дает результат. @Nehal   -  person Samson Maben    schedule 02.08.2017
comment
Тогда вам нужно будет использовать Observable и Subject. Вот пример из документа и плункер   -  person Nehal    schedule 02.08.2017
comment
Не могли бы вы продемонстрировать это для вышеперечисленных кодов. будет большим подспорьем. @Nehal   -  person Samson Maben    schedule 03.08.2017

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете сообщить второму компоненту об изменениях, создав службу общего доступа с использованием Observable и BehaviorSubject и обновив переменную myName с помощью метода next().

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);
        }
      });
  }

Это демонстрация плункера.

person Nehal    schedule 03.08.2017