Question

我有一个Select组件，显示学生列表。当您选择学生时，我会调用服务来获取一些数据，然后导航到dashboard组件，您可以在其中查看分解为子组件的所有数据。我使用@Input()将数据从dashboard传递给子组件，但我遇到的问题是用户也可以访问特定组件页面而无需通过select，所以在此case，不会调用该服务。我最终做的是在我的服务中使用共享变量来保存数据。在每个组件中，我检查此变量是否为null。如果它为null，我调用该服务，如果没有，我只返回我已有的数据。这是代码：

service.ts

@Injectable()
export class Service {


  private studentDataStore = new BehaviorSubject<Student>(null);
  public studentData$ = this.studentDataStore .asObservable();
  selectedStudentId: number;
  studentData: Student = null;
  constructor(private _httpClient: HttpClient) { }

  loadStudentDetails(studentId) {
    this.studentData= null;
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json');

    return this._httpClient.get<Student>('/students/' + studentId, { headers: headers }).toPromise().then(res => {
      this.studentData= res;

      this.studentDataStore .next(res);
    });
  }
}

请注意，我在顶部声明studentData以在我的组件中共享我的数据。

选择组件

export class SelectComponent implements OnInit {


  constructor(private _service: Service, private _router: Router) { }

  ngOnInit() {}

  selectStudent(selectedStudent) {
    this._service.loadStudentDetails(selectedStudent.Id).then(x => {
      this._router.navigate(['/students', selectedStudent.Id]);
    });
  }

}

上面会导航到类似http://localhost:4200/students/3的内容，它会显示Dashboard组件：

export class DashboardComponent implements OnInit {

  constructor(public _service: Service, private _route: ActivatedRoute) { }

  ngOnInit() {

    const Id= this._route.snapshot.params['Id'];
    if (!this._service.studentData) {
      this._service.loadStudentDetails(Id);
    }
  }
}

通过执行上述操作，用户可以通过dashboard for a student或直接转到select来访问dashboard for a specific student。由于上述原因，我不是subscribing or using aysnc。有没有正确的方法来处理上面的场景？

Answer 1

对于某些情况，您的方法完全没问题。

基本上，您所做的是使用服务来存储数据，这意味着将服务用作商店。在这种情况下，它会存储学生的详细信息。

现在想象一下，您的应用程序变得如此之大，以至于您有数百个此类案例，并且您使用了许多不同的服务来存储大量不同的数据。什么都没有打破，但你失去了对你的应用程序状态的控制。您不再知道您拥有哪些数据，何时获得数据以及获得数据。

对于这种情况@ngrx/store来救援。基本思想是从组件/服务中获取数据并将其存储在组件和服务都可以访问它的地方。因此，您可以划分应用程序逻辑和数据管理，以使应用程序的状态更易于维护。

以下是根据您提供的详细信息展示基本想法的插件（请查看src/app.ts）： plunker

此处还可以找到一些好的阅读材料： https://gist.github.com/btroncone/a6e4347326749f938510

从子/兄弟组件调用角度服务？

1 个答案: