サービスから呼び出されたときにコンポーネントが最初のビューにロードされない

Question

サービスからロードされる最初のコンポーネントを実装しています。ページを完全にリフレッシュした後、このコンポーネントを表示する（ブランクにロードする）必要があります。別のページに移動し、データが正常に読み込まれます。私たちが間違っていることに誰かが光を当てることはできますか？

はここでコンポーネント

import { Component, OnInit } from '@angular/core'; 
import { StbBaseComponent } from './StbBaseComponent'; 
import { IRegion } from './region.component'; 
import { RegionService } from '../services/region.service'; 

@Component({ 
    selector: 'region-list', 
    templateUrl: './regionlist.component.html', 
    styleUrls: ['./regionlist.component.less'] 
}) 
export class RegionListComponent extends StbBaseComponent implements OnInit { 
    public regions: IRegion[]; 
    public selectedRegion: IRegion; 

    constructor(private regionService: RegionService) { 
     super(); 
    } 

    ngOnInit() { 
     this.getRegions(); 
    } 

    onSelect(region: IRegion): void { 
     this.selectedRegion = region; 
    } 

    getRegions(): void { 
     this.regionService.getRegions().subscribe(regions => this.regions = regions); 
    } 
} 

ここでは、サービスの実装

import { Injectable, Inject } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { of } from 'rxjs/observable/of'; 

import { Http } from '@angular/http'; 
import { IRegion } from '../components/region.component'; 

@Injectable() 
export class RegionService { 
    private baseServiceUrl: string; 
    private fetchedRegions: IRegion[]; 

    constructor(private http: Http, 
     @Inject('BASE_URL') baseUrl: string) 
    { this.baseServiceUrl = baseUrl } 

    getRegions(): Observable<IRegion[]> { 
     var url = this.baseServiceUrl + 'api/realm/regions'; 

     this.http.get(url).subscribe(result => { 
      this.fetchedRegions = result.json() as IRegion[]; 
      console.log('regions called. count:' + this.fetchedRegions.length); 
     }, error => { 
      console.error(error) 
     }); 

     return of(this.fetchedRegions); 
    } 
} 

です我々はコンポーネントにアクセスするために使用するリンクはここ

<li [routerLinkActive]="['link-active']"> 
    <a [routerLink]="['/regions']"> 
     Regions 
    </a> 
</li> 

あるNgModule構成は

です

@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     HomeComponent, 
     RegionListComponent 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'regions', component: RegionListComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ], 
    providers: [RegionService] 
}) 

Answer 1

RRForUIはあなたのコードが悪いのかについて説明したHTTP呼び出しを解決するの世話をする必要があります

RegionService：

getRegions(): Observable<IRegion[]> { 
    var url = this.baseServiceUrl + 'api/realm/regions'; 
    return this.http.get(url).map((res: Response) => res.json()); 
} 

あなたのコンポーネントでは、

getRegions(): void { 
    this.regionService.getRegions().subscribe(regions => this.regions = regions); 
} 

---

PS：常に非推奨しようとしている、HttpClient代わりHttpの使用を好みます。あなたのコードは非常に簡単になりHttpClient使用

、

return this.http.get<IRegion[]>(url);

Answer 2

私がここで起こっているのは です。1）非同期操作でサービスコールに加入していて、this.fetchedRegionsを返しています。これは空白になります。したがって、ページが読み込まれたときに何も表示されないため、何も表示されません 2）次に、別のルートに移動して戻ると、this.fetchedRegionsが解決され、データが表示されます。

mapでサービスからのsubscribeを置き換え、this.fetchedRegionsを返しません。コンポーネント内のサブスクリプションでは、次の変更を加える必要があり

、