Angular4：在应用程序范围的单例服务中刷新刷新数据

问题描述：

使用一些代表视图的组件处理小型角度项目时，该应用程序具有一个主要组件，其中包含一个项目列表，该项目在点击时加载其他（适当的）组件。该项目具有向所有组件提供数据的服务，当调用主组件的ngOnInit() {}方法后，该服务会从API加载共享数据，之后数据可供应用程序中的每个其他组件使用。Angular4：在应用程序范围的单例服务中刷新刷新数据

现在，我的问题是，当用户输入除家庭组件以外的任何其他组件的完整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});

答

你可以添加一个<router-outlet>到你家组件，然后让其他视图家庭路线（/speciality等）的孩子的路线。

这将确保主路线总是加载第一

答

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

你可以做以上所有组件中提到的代码。

Angular4：在应用程序范围的单例服务中刷新刷新数据

相关推荐