Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2017, 20:00
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 16.01.2013
Сообщений: 98

Связь между соседними компонентами
Добрый день!
Подскажите как сделать связь между соседними компонентами?

В header есть форма поиска. И есть отдельная страница с результатами поиска. Если мы находимся на странице с результатами и запустим поиск, то результаты не обновляются (если поиск запускать с другой страницы, то поиск работает)

Форма поиска и результат поиска - это не дочерний и родительский компонент, поэтому декораторы input output не подойдут. Связь нужно делать видимо через сервис.

Сейчас код с результатом поиска такой
export class SearchResultComponent implements OnInit {

  private searchResult: any;

  constructor(private baseService: BaseService) { };

  ngOnInit(): void {
    this.searchResult = this.baseService.getHandlingResult();
    console.log('result', this.searchResult);
  }

}


В ngOnInit все будет выполняться только один раз при инициализации компонента. Что делать когда мы находимся на той же странице что и этот компонент, и данные нужно обновлять по событию из соседнего компонента
Ответить с цитированием
  #2 (permalink)  
Старый 17.10.2017, 07:33
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Цитата:
В ngOnInit все будет выполняться только один раз при инициализации компонента.
Пусть baseService.getHandlingResult() возвращает Observable. И у тебя будет в ngOnInit подписка.
Ответить с цитированием
  #3 (permalink)  
Старый 17.10.2017, 08:46
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 16.01.2013
Сообщений: 98

Подскажите, пожалуйста, как это сделать.

Код класса для результатов поиска такой:
export class SearchResultComponent implements OnInit {

  private searchResult: any;

  constructor(private baseService: BaseService) { };

  ngOnInit(): void {
    this.baseService.getHandlingResult()
      .subscribe(res => {
        console.log('subscribe', res);
      });
  }

}


В сервисе такой код:
import { Observable } from 'rxjs';
...

@Injectable()
export class BaseService {
  constructor(private http: Http) { }

  private handling: any;

  getHandlingResult(): Observable<any> {
    return Observable.of(this.handling);
  }
...


Результат прежний: если поиск запускать на странице с результатами, то данные не обновляются. С других страниц поиск работает
Ответить с цитированием
  #4 (permalink)  
Старый 17.10.2017, 08:57
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

tai,
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
...

@Injectable()
export class BaseService {
  constructor(private http: Http) { }

  private handling: BehaviorSubject<any> = new BehaviorSubject(null);

  getHandlingResult() {
    return this.handling;
  }

  setResult(result) {
    this.handling.next(result);
  }
...


из компонента поиска нужно вызывать так this.baseService.setResult(result), где result - результат поиска.
Ответить с цитированием
  #5 (permalink)  
Старый 17.10.2017, 09:45
tai tai вне форума
Аспирант
Отправить личное сообщение для tai Посмотреть профиль Найти все сообщения от tai
 
Регистрация: 16.01.2013
Сообщений: 98

Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прослушивание событий между компонентами разных view Sogl ExtJS 11 08.11.2016 21:02
связь между переменными Faab Events/DOM/Window 4 08.10.2013 14:01
Связь между страницами с javascript и php ... и обратно okrip25 AJAX и COMET 7 09.01.2012 14:43
Связь между двумя окнами. iMIhael Общие вопросы Javascript 2 28.11.2011 13:39
Связь полей между собой vinnie Javascript под браузер 13 20.02.2010 17:19