Question

使用一些代表视图的组件的小角度项目，应用程序有一个主组件，其中包含一个项目列表，单击这些项目时加载其他（适当的）组件中的视图。该项目有一个为所有组件提供数据的服务，该服务在调用主组件的ngOnInit() {}方法时从API加载共享数据，之后数据可供应用程序中的每个其他组件使用。

现在，我的问题是当用户输入除主组件之外的任何其他组件的完整url路径时（通常是由于在此组件上点击刷新），服务中的数据丢失且组件没有任何内容显示。有没有办法使主组件始终首先加载，即使组件的直接路径输入到URL？如果数据已经加载，我是否应该只检查每个组件，如果没有加载则应该加载？谢谢

以下是主页组件的来源。

import { Component, OnInit } from '@angular/core';
import { ServiceCodeService } from './service-code.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  private specialityList: string[];
  private route: ActivatedRoute;
  private router: Router;
  private svpList: string[];

  constructor(private serviceCodeService: ServiceCodeService, route: ActivatedRoute, router: Router) {
    this.route = route;
    this.router = router;
  }

  ngOnInit() {
    this.serviceCodeService.updateServiceCodesFromAPI().subscribe(
      servCodes => {
          this.specialityList = this.serviceCodeService.getAllSpecialities();              
      }
    );
  }

  specialitySelected(item: any) {
    this.router.navigate(['../speciality/'.concat(item)], {relativeTo: this.route});
  }

  svpSelected(item: any) {
    this.router.navigate(['../svp/'.concat(item)], {relativeTo: this.route});

Answer 1

您可以在家庭组件中添加<router-outlet>，然后制作家庭路线的其他视图（/speciality等...）子路径。

这将确保主路线始终首先加载

Answer 2

this.serviceCodeService.updateServiceCodesFromAPI().subscribe(
      servCodes => {
          if(servCodes) {
           console.log(servCodes);
           this.specialityList = this.serviceCodeService.getAllSpecialities();              
          }
      }
    );

您可以在所有组件中执行上述代码。

Angular4：在应用程序范围的单件服务中重新加载刷新数据

2 个答案: