从服务调用时，组件不会在第一个视图上加载答案

【问题标题】：Components don't load on first view when called from Service从服务调用时，组件不会在第一个视图上加载
【发布时间】：2018-05-27 21:08:11
【问题描述】：

我们正在实现我们的第一个组件，该组件从服务加载，尽管在我们第一次加载页面时数据永远不可见，但它可以工作。完全刷新页面后，我们需要查看这个组件（加载空白），导航到另一个，当我们返回数据时加载正常。谁能阐明我们做错了什么？

这是组件

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]
})

【问题讨论】：

this.http.get(url).subscribe 是异步操作，return of(this.fetchedRegions); 不会返回您期望的结果
您不应在服务调用中添加 'subscribe()'。只需在 '.map()' 中返回 json

标签： angular angular-services angular-components

【解决方案1】：

RRForUI 已经解释了您的代码有什么问题，

您需要进行以下更改，

区域服务：

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);

【讨论】：

【解决方案2】：

我认为这里发生的是 1）您正在订阅异步操作的服务调用并返回this.fetchedRegions，这将是空白的。因此，页面加载时没有数据可显示，因为根本没有延迟 2）接下来，当您导航到另一条路线并返回时，this.fetchedRegions 已解析，因此您会看到数据。

用地图替换订阅服务并且不返回 this.fetchedRegions。组件中的订阅应该负责解决 http 调用

【讨论】：