2017-10-28 19 views
-1

ビューを表すいくつかのコンポーネントを持つ小さな角度のあるプロジェクトでは、アプリケーションにはホームコンポーネントがあります。他の(適切な)コンポーネント。プロジェクトにはすべてのコンポーネントにデータを提供するサービスがあり、ホームコンポーネントの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}); 

答えて

2

あなたの家のコンポーネントに<router-outlet>を追加し、家庭のルートの(/specialityなど...)子供のルートを他のビューを作ることができます。

これは、ホームのルートは、常にあなたはすべてのコンポーネントに言及したコードの上に行うことができます最初の

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

をロードしていることを確認します。

関連する問題