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

Question

我正在使用角度服务在组件之间传递数据。我希望此服务保存 4 个 ID uniId、schoolId、classId 和 StudentId。有 4 个组件：组件 1 设置 uniId，组件 2 使用 uniId 设置 schoolId，组件 3 使用 uniId 和 schoolId 设置 classId，组件 4 使用 uniId、schoolId 和 classId 设置 StudentId。 我想实现以下目标：

1. 将所有 4 个 id 设置到服务中。
2. 使用service，获取组件视图上的ids，并以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 中，当我单击第一个链接时，它将显示所有大学，当我单击第二个链接时，它将显示该大学中已选择 id 的所有学校，并且班级将 npt 导航到任何内容，因为组件 3 是班级。

我没有在服务中获取数据，并且导航不会连接 id。 任何人都可以帮忙解决这个问题吗？

Answer 1

三个问题：

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

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 没有任何意义。