Angular 7 - перезагрузить/обновить данные разных компонентов

Создайте класс обслуживания @Injectable с темой в нем. Пусть оба компонента просмотрят этот объект класса обслуживания, чтобы узнать, что и когда делать. Один класс может вызвать .next() для предмета, а другой может подписаться на него и вызвать свою собственную функцию, когда получит обновление.

Переместите код, извлекающий данные, в службу, чтобы служба поддерживала groups.

Затем оберните эти данные в компоненте 1 в геттере:

get groups() {
  return this.userManagementService.groups
}

Затем каждый раз, когда данные изменяются, внедрение зависимостей Angular будет автоматически вызывать геттер и получать самые последние значения.

Пересмотренный сервис

export class UserManagementService extends RestService {
  groups;
  private BASE_URL_UM: string = '/portal/admin';

  private headers = new HttpHeaders({
    'Authorization': localStorage.getItem('token'),
    'Content-Type': 'application/json'
  });

  constructor(protected injector: Injector,
    protected httpClient: HttpClient) {
    super(injector);

    // Get the data here in the service
    this.loadGroup();
  }

  getEapGroupList(): Observable < EapGroupInterface > {
    return this.get < GroupInterface >
      (this.getFullUrl(`${this.BASE_URL_UM}/groups`), {
        headers: this.headers
      });
  }

  loadGroup() {
    this.getEapGroupList()
      .subscribe(response => {
        this.groups = response;
      })
  }

  updateGroup(body: CreateGroupPayload): Observable < CreateGroupPayload > {
    return this.put < GroupPayload >
      (this.getFullUrl(`${this.BASE_URL_UM}/group`), body, {
        headers: this.headers
      }).pipe(
         // Reget the data after the update
         tap(() => this.loadGroup()
      );
  }
}

Пересмотренный компонент 1

export class UserGroupComponent implements OnInit {
    get groups() {
      return this.userManagementService.groups
    }

  constructor(private userManagementService: UserManagementService) {}

  ngOnInit() {

  }
}

ПРИМЕЧАНИЕ. Синтаксис этого кода не проверялся!

У меня есть аналогичный рабочий пример: https://github.com/DeborahK/Angular-Communication/tree/master/APM-FinalWithGetters

(Проверьте файлы папки оболочки продукта вместе с product.service.ts)

В Интернете есть много примеров, вы можете использовать "Subject" и Output EventEmitter. Оба будут работать. В следующем примере приведен пример кода общей службы. Попробуйте использовать его.

@Injectable()
export class TodosService {
  private _toggle = new Subject();
  toggle$ = this._toggle.asObservable();

  toggle(todo) {
    this._toggle.next(todo);
  }
}

export class TodoComponent {
  constructor(private todosService: TodosService) {}

  toggle(todo) {
    this.todosService.toggle(todo);
  }
}

export class TodosPageComponent {
  constructor(private todosService: TodosService) {
    todosService.toggle$.subscribe(..);
  }
}

Write a common service and call the same in both components.
like below:

common service: 
           dataReferesh = new Subject<string>();
           refereshUploadFileList(){
            this.dataReferesh.next();
            }

component2.ts:

    setPayload() {
      const formValue = this.newGroupForm.value
      return {
        'id': '5c47b24918a17c0001aa7df4',
        'groupName': formValue.groupName,
      }
    }

        onUpdateGroup() {
         this.userManagementService.updateGroup(this.setPayload())
           .subscribe(() => {
             this.shareservice.refereshUploadFileList(); 
               })
           }

And component1.ts:


         ngOnInit() {
         this.loadGroup();
         this.shareservice.dataReferesh.subscribe(selectedIndex=> this.loadGroup());
          }