在组件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
中刷新答案 0 :(得分:1)
将检索数据的代码移至服务,以便服务维护groups
。
然后将数据包装到组件1中的吸气剂中:
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)
答案 1 :(得分:0)
创建一个带有主题的@Injectable
服务类。让这两个组件都查看此服务类主题,以了解何时执行操作。一类可以在主题上调用.next(),另一类可以订阅它并在更新时调用它自己的函数。
答案 2 :(得分:0)
网络上有很多示例,您可以使用“主题”和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(..);
}
}
答案 3 :(得分:0)
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());
}