Angular 7 - 从不同组件更改时重新加载/刷新角度材料数据表

Question

如何在组件 2 中进行更改时刷新组件 1 中的角度材料数据表。这两个组件不在同一个父节点下/不相关。

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>

当我在组件 1 中创建新用户 onCreateUser() 时，loadGroupDetail() 应该在组件 2 中刷新。这些组件不相关

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