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

Question

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

这是组件

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

我们用来访问组件的link是

<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

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

用地图替换订阅服务，不要 return this.fetchedRegions。组件中的订阅应该负责解析 http 调用

Answer 2

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 instead of Http，这将被弃用。

使用 HttpClient 您的代码变得更加简单，

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

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

Components don't load on first view when called from Service

angular-services

angular-components

angular