Запустите функцию на компонентах, когда значение службы обновлено (Angular 6) - PullRequest
Новая
       36

Запустите функцию на компонентах, когда значение службы обновлено (Angular 6)

0 голосов
/ 19 октября 2018

Я создаю приложение со структурой, подобной этой:

structure

Когда вы щелкаете элемент в MenuComponent, оно испускает объект вкомпонент dashboard, который затем отправляется оттуда в OverViewComponent и UserComponent.Они, в свою очередь, запускают функцию в @Input () для извлечения различных данных на основе полученных данных, которыми, в свою очередь, можно манипулировать.

Однако мне нужно иметь возможность сохранять измененные данные вместе из внешней оболочки, и, поскольку я не хотел отправлять данные обратно в DashboardComponent, я решил использовать службу с общими переменными.Это работает нормально, за исключением того, что я не нашел аналогичного способа @Input () для запуска функций на компонентах при изменении переменной службы.Мне нужно это для получения свежих данных, когда новый пункт выбран в меню.Я читал некоторые более ранние посты здесь на SO, но большинство из них использовали BehaviorSubject для подписки на изменения - но я не смог найти ни одного поста, где они запускали функцию на компоненте, когда переменная изменялась в сервисе.Кстати, переменная является JSON-объектом.Любые указатели приветствуются!

РЕДАКТИРОВАТЬ: Прежде чем я добавил службу, я передал значение с помощью @Output из MenuComponent в DashboardComponent.Я получил его через селектор в DashboardComponent с @Input: 

<app-menu-component (emitGroup)="getGroup($event)"></app-menu-component>

Затем я снова использовал @Output для последующей передачи его в UserComponent через селектор. 

<app-user [group]="selectedGroup"></app-user>

Затем в UserComponentЯ мог бы запустить функцию в @Input, когда данные изменились, например: 

  @Input()
  set group(g) {
    this.selectedGroup = g;
    this.findUsers(this.selectedGroup); // this is what I want to achieve
  }

Есть ли способ сделать что-то подобное из службы?

1 Ответ

0 голосов
/ 20 октября 2018

Из вопроса и его описания, я думаю, вы хотите что-то вроде этого:

Вы можете создать службу, такую ​​как это:

shared.service.ts: 

@Injectable()
export class SharedService {

mySubject : Subject<any> = new Subject<any>();
myData : any ;

myDataSetter(data : any){
 this.myData = data;
 this.mySubject.next(this.myData);
}

}

Используйте myDataSetter из вашего menucomponent для установки изменяемых данных. 

in your component subscribe to the subject in the service during the ``ngOnInit()`` this way : 

this._sharedService.mySubject.subscribe((data) => {
 //call my function
})
...