使用Angular中的服务方法在组件之间传递数据

Question

我使用角度服务在组件之间传递数据。我希望这项服务能保存uniId、schoolId、classId和studentId这四个id。共有4个组件：组件1设置uniId，组件2使用uniId设置schoolId，组件3使用uniId和schoolId设置classId，组件4使用uniId、schoolId和classId设置studentId。我想实现以下目标：

1. 将所有4个id设置到服务中
2. 使用service，获取组件视图上的id，并使用它以Component1 Path的形式进行导航->组件2路径->组件3路径->Component4使用锚标记的路径(这样当我在第3页时，我可以使用来自服务的id导航到第2页。(

型号类别

export interface GlobalData {
uniId: number;
schoolId: number;
classId: number;
studentId: number;
}

服务等级

import { Injectable } from '@angular/core';
import { GlobalData } from 'src/models/GlobalData';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class GlobaldataService {
private globalDataSubject = new Subject<GlobalData>();
constructor() { }
public getGlobalData(): Observable<GlobalData> {
return this.globalDataSubject.asObservable();
}
public setGlobalData(globalDataObj: GlobalData) {
return this.globalDataSubject.next(globalDataObj);
}
}

组件3

globalDataObject: GlobalData;
uniId: number = 0;
schoolId: number = 0;
constructor(private router: Router, private route: ActivatedRoute, private globalDataService: GlobaldataService) {
}
ngOnInit() { 
this.route.queryParams.subscribe(params => {
this.uniId = params['uniId'];
this.schoolId = params['schoolId'];
})
this.globalDataService.setGlobalData({
uniId: this.uniId, 
schoolId: this.schoolId,
classId: 0,
studentId: 0
});
this.globalDataService.getGlobalData().subscribe(x =>    
this.globalDataObject = x) 
}

组件3视图

<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/unis']">Universities</a>
</li>
<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/schools']" [queryparams]="{uniId: this.uniId}">Schools</a>
</li>
<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/classes']">Classes</a>
</li>

在组件3中，当我点击第一个链接时，它会显示所有的unis，当我单击第二个链接时它会显示uni中id被选中的所有学校，并且类将npt导航到任何位置，因为组件3是类。

我没有在服务中获取数据，导航也没有连接ID。有人能帮忙吗。

Answer 1

三个问题：

1. 您正在params订阅之外设置全局数据。

2. 除非使用async管道，否则可观察订阅不会触发更改检测。所以你需要用ChangeDetectorRef强制它。

constructor(private changeDetectorRef: ChangeDetectorRef) {}
async ngOnInit() {
this.route.queryParams.subscribe((params) => {
this.uniId = params['uniId'];
this.schoolId = params['schoolId'];
this.globalDataService.setGlobalData({
uniId: this.uniId,
schoolId: this.schoolId,
classId: 0,
studentId: 0,
});
this.globalDataService.getGlobalData().subscribe((x) => {
this.globalDataObject = x;
this.changeDetectorRef.detectChanges();
});
});
}

3. queryParams有一个大写的P

...
<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/schools']" [queryParams]="{ uniId: this.uniId }"
>Schools</a
>
</li>
...

---

这一切都可以重写得简单得多，如果你只是简单地设置和获取值，就不需要可观测性。

服务

@Injectable({
providedIn: 'root',
})
export class GlobaldataService {
globalData?: GlobalData;
}

组件3

get uniId() {
return this.globalDataService.globalData?.uniId;
}
constructor(
private route: ActivatedRoute,
private globalDataService: GlobaldataService
) {}
ngOnInit() {
const params = this.route.snapshot.queryParams;
this.globalDataService.globalData = {
uniId: params['uniId'],
schoolId: params['schoolId'],
classId: 0,
studentId: 0,
};
}

<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/unis']">Universities</a>
</li>
<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/schools']" [queryParams]="{ uniId }">Schools</a>
</li>
<li class="dds__breadcrumb__item" [routerLinkActive]="['link-active']">
<a [routerLink]="['/classes']">Classes</a>
</li>

尽管当您可以直接注入服务时，我认为通过模板传递queryParams没有任何意义。