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

Question

当组件2中的更改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);
  }
  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
      });
  }
}

component1.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>

component2.ts

setPayload() {
  const formValue = this.newGroupForm.value
  return {
    'id': '5c47b24918a17c0001aa7df4',
    'groupName': formValue.groupName,
  }
}
onUpdateGroup() {
    this.userManagementService.updateGroup(this.setPayload())
      .subscribe(() => {
          console.log('success);
          })
      }

当我更新 component1 中的OnupDateGroup（）API时，LoadGroup（）应在 Component2

Answer 1

移动将数据检索到服务的代码，因此服务维护groups。

然后将该数据包裹在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/master/apm-finalwithgetters

（查看产品壳文件夹文件以及product.service.ts）

Answer 2

网络上有很多示例，您可以使用"主题"并输出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(..);
  }
}

Answer 3

创建一个带有主题的@Injectable服务类。让两个组件都查看此服务类主题，以查看该怎么办。一个类可以在主题上调用.next（），另一个可以订阅它，并在获得更新时调用其自己的函数。

Answer 4

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