Question

在我的Angular应用程序中，我想在app init之前加载一个JSON数据，我将其存储在一个服务中并在我的应用程序中使用它。

我使用解析器在应用初始化之前将数据加载到Angular2 load configuration from backend on startup中的suggessted。但是当我进行服务或构建时，解决方案会出错。

ERROR in Error遇到静态解析符号值。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda（原始.ts文件中的位置43:19），解析/Users/name/src/app/app.module.ts中的符号AppModule

请告诉我如何解决此错误，或者在app init之前是否有其他方式加载数据。

app.module.ts

import { APP_INITIALIZER } from '@angular/core';
import { SearchService } from './backend.service';
import { BackendResolver } from './backend.resolver';
import { MyService } from './my.service';

providers: [
SearchService,
{ provide: APP_INITIALIZER,
  useFactory: (config:SearchService) => () => config.call(),
  deps: [SearchService],
  multi: true },
  BackendResolver,
  MyService
 ],
 bootstrap: [AppComponent]

backend.service.ts

import { Inject, Injectable } from '@angular/core';
import { Http, URLSearchParams, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService {
jsonData;
constructor(
    private http: Http,
) { }

call() {
    return new Promise((resolve) => {
        this.http.get('assets/appData.json').map(res => res.json())
            .subscribe(jsonData => {
                this.jsonData = jsonData;
                resolve();
            });
    });
  }
}

backend.resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { SearchService } from './backend.service';

@Injectable()
export class BackendResolver implements Resolve<any> {
  constructor(
  private searchService: SearchService
  ) {}

resolve(route: ActivatedRouteSnapshot): Promise<any> {
  return this.searchService.call();
 }
}

my.service.ts

import { Inject, Injectable } from '@angular/core';

@Injectable()
export class MyService {
    resources;
    constructor() { }
    public getData() {
        return this.resources;
    }

    public saveData(param) {
        this.resources = param;
    }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';
import { SearchService } from './backend.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  jsonData: any;
  constructor(
    private myService: MyService,
    private searchService: SearchService
    ) {}
    ngOnInit() {
      this.jsonData = this.searchService.jsonData;
      this.myService.saveData(this.jsonData);
    }
}

footer.component.ts

    import { Component, OnInit } from '@angular/core';
    import { MyService } from '../my.service';
    @Component({
        selector: 'my-footer',
        templateUrl: './footer.component.html',
        styleUrls: ['./footer.component.scss']
    })
    export class FooterComponent implements OnInit {
        contactUs: any;
        constructor(
            private myService: MyService
        ) { }
        ngOnInit() {
            this.contactUs=this.myService.getData().contactUs;
        }
    }

Answer 1

这是一个恼人的问题......就在这里：

{ provide: APP_INITIALIZER,
  useFactory: (config:SearchService) => () => config.call(),
  deps: [SearchService],
  multi: true 
}

您不能将箭头语法用于自定义提供程序工厂函数。将其更改为显式函数，如：

useFactory: function(config:SearchService) {
    return config.call();
}

Angular2：如何在App init之前加载JSON数据

1 个答案: