如何在组件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中刷新
将检索数据的代码移动到服务,以便服务维护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
(查看product-shell文件夹文件以及product.service.ts)
创建一个带有Subject的@Injectable
服务类。让两个组件都看这个服务类,看看该怎么做。一个类可以在主题上调用.next(),另一个类可以订阅它并在获得更新时调用它自己的函数。
网上有很多例子,你可以使用“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());
}