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

Question

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

将所有 4 个 ID 设置到服务中。
使用服务，获取组件视图上的 ID，并使用它以 Component1 Path -> Component2 Path -> Component3 Path -> Component4 Path 的形式使用锚标记进行导航（这样当我在第 3 页上，我可以使用服务中的 ID 导航到第 2 页。）

型号class

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

服务Class

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 中，当我点击第一个 link 时，它会显示所有大学，当我点击第二个 link 时，它会显示大学中选择了 id 的所有学校和 classes 将 npt 导航到任何内容，因为组件 3 是 Classes.

我没有在服务中获取数据，导航也没有连接 ID。谁能帮忙解决这个问题。

Answer 1

三个问题：

您在参数订阅之外设置全局数据。
Observable 订阅不会触发更改检测，除非您使用 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();
      });
    });
  }

queryParams大写P

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

这一切都可以重写得更简单，如果您只是设置和获取值，则不需要 observables。

服务

@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 没有意义，但您可以直接注入服务。

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

Passing the data between components using service method in Angular

service

behaviorsubject

angular2-observables

angular