Угловой 7 - перезагружать / обновлять угловой материал с данными при изменении от другого компонента

Question

Как обновить угловой материал, доступный для данных в компоненте 1, когда изменения внесены в компонент 2. Эти два компонента не находятся под одним родительским узлом / не связаны между собой.

customer.service.ts

export class UserManagementService extends RestService {

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

  createUser(body: UpdateUserDetailPayload): Observable < UpdateUserDetailPayload > {
    return this.post < UpdateUserDetailPayload >
      (this.getFullUrl(`${this.BASE_URL_UM}/user`), body, {
        headers: this.headers
      });
  }

  getEapGroupDetail(groupCode: string): Observable < EapGroupElement > {
      return this.get < GroupPayload >
        (this.getFullUrl(`${this.BASE_URL_UM}/group/${groupCode`), {
        headers: this.headers
      });
  }
}

component1.ts

onCreateUser() {
  this.userManagementService.createUser(this.setCreatePayload())
    .subscribe(response => {
        console.log('success');
      },
      (error => {
        console.log('error');
      })
    )
}

component2.ts

loadGroupDetail() {
  this.userManagementService.getEapGroupDetail(this.groupCode)
    .subscribe(response => {
      this.groupDetail = response;
      this.dataSource = new MatTableDataSource(this.groupDetail.userList);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    })
}

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="custom-column">
      {{ 'Dashboard.header.management.user.username' | translate}}
    </th>
    <td mat-cell *matCellDef="let element" class="custom-column">
      {{element.username}}
    </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="custom-column">
      {{ 'Dashboard.header.management.user.email' | translate}}
    </th>
    <td mat-cell *matCellDef="let element" class="custom-column">
      {{element.email}}
    </td>
  </ng-container>

  <tbody>
    <tr mat-header-row *matHeaderRowDef="displayedColumns">
    </tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
    </tr>
  </tbody>
</table>

Когда я создаю нового пользователя onCreateUser () в component1, loadGroupDetail () должен обновить в component2.Эти компоненты не связаны

Answer 1

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

const subject = new Subject();
button.addEventListener(‘click’, () => subject.next('click');
subject.subscribe(x => console.log(x));

Добавлен простой пример.как найдено здесь: https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93