Angular 7 - 重新加载/刷新数据不同的组件 [英] Angular 7 - Reload / refresh data different components
问题描述
组件2发生变化时如何刷新不同组件1中的数据.这两个组件不在同一个父节点下.
customer.service.ts
export class UserManagementService extends RestService {private BASE_URL_UM: string = '/portal/admin';私有标头 = 新的 HttpHeaders({'授权':localStorage.getItem('token'),'内容类型':'应用程序/json'});构造函数(受保护的注入器:注入器,受保护的 httpClient: HttpClient) {超级(注射器);}getEapGroupList(): Observable <EapGroupInterface >{返回 this.get <组界面 >(this.getFullUrl(`${this.BASE_URL_UM}/groups`), {标头:this.headers});}updateGroup(body: CreateGroupPayload): Observable <CreateGroupPayload >{返回 this.put <组有效载荷 >(this.getFullUrl(`${this.BASE_URL_UM}/group`), 正文, {标头:this.headers});}}
Component1.ts
导出类 UserGroupComponent 实现 OnInit {构造函数(私有 userManagementService:UserManagementService){}ngOnInit() {this.loadGroup();}负载组(){this.userManagementService.getEapGroupList().订阅(响应=> {this.groups = 响应;})}}
<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}}
</mat-list-item><mat-sidenav-content><路由器插座></路由器插座></mat-sidenav-content>
component2.ts
setPayload() {const formValue = this.newGroupForm.value返回 {'id':'5c47b24918a17c0001aa7df4','groupName': formValue.groupName,}}onUpdateGroup() {this.userManagementService.updateGroup(this.setPayload()).subscribe(() => {console.log('成功);})}
当我在 component1 中更新 onUpdateGroup() api 时,loadGroup() 应该在 component2
中刷新网上有很多例子,你可以使用Subject"和Output EventEmitter.两者都会起作用.以下示例是共享服务的示例代码.尝试使用它.
@Injectable()导出类 TodosService {私人 _toggle = 新主题();切换$ = this._toggle.asObservable();切换(待办事项){this._toggle.next(todo);}}导出类 TodoComponent {构造函数(私有 todosService:TodosService){}切换(待办事项){this.todosService.toggle(todo);}}导出类 TodosPageComponent {构造函数(私有 todosService:TodosService){todosService.toggle$.subscribe(..);}}
How to refresh data in different component 1 when changes made in component 2. These two components are not under same parentnode.
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);
})
}
When I update onUpdateGroup() api in component1, loadGroup() should refresh in component2
There is a lot of example on the web, you can use "Subject" and Output EventEmitter. Both will work. The following example is the sample code of shared service. Try to use it.
@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(..);
}
}
这篇关于Angular 7 - 重新加载/刷新数据不同的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!