Angular 7 - 重新加载/刷新不同组件的数据

当组件2发生变化时，如何刷新不同组件1中的数据。这两个组件不在同一个父节点下。

客户服务.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);
  }
  getEapGroupList(): Observable < EapGroupInterface > {
    return this.get < GroupInterface >
      (this.getFullUrl(`${this.BASE_URL_UM}/groups`), {
        headers: this.headers
      });
  }

  updateGroup(body: CreateGroupPayload): Observable < CreateGroupPayload > {
    return this.put < GroupPayload >
      (this.getFullUrl(`${this.BASE_URL_UM}/group`), body, {
        headers: this.headers
      });
  }
}

组件1.ts

export class UserGroupComponent implements OnInit {

  constructor(private userManagementService: UserManagementService) {}

  ngOnInit() {
    this.loadGroup();
  }

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

}

<mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
  <div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
    {{group.groupName}}
  </div>
</mat-list-item>
<mat-sidenav-content>
  <router-outlet></router-outlet>
</mat-sidenav-content>

组件2.ts

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

onUpdateGroup() {
    this.userManagementService.updateGroup(this.setPayload())
      .subscribe(() => {
          console.log('success);
          })
      }

当我更新 onUpdateGroup() api 时组件1, loadGroup() 应该刷新组件2

将检索数据的代码移至服务，以便服务维护groups.

然后将组件 1 中的数据包装在 getter 中：

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

然后每次数据发生变化时，Angular 的依赖注入都会自动调用 getter 并获取最新的值。

修改后的服务

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 https://github.com/DeborahK/Angular-Communication/tree/master/APM-FinalWithGetters

（查看product-shell文件夹文件以及product.service.ts）