Как передать параметры, отображаемые из бэкэнда в метод начальной загрузки angular2

В финальном релизе Angular2, поставщик APP_INITIALIZER может быть использован для достижения того, что вы хотите.

Я написал Суть с полным примером:https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9

пример gist читает из файлов JSON, но может быть легко изменен для чтения из конечной точки REST.

что вам нужно, в основном:

a) настройка APP_INITIALIZER в существующем модуле файл:

import { APP_INITIALIZER } from '@angular/core';
import { BackendRequestClass } from './backend.request';
import { HttpModule } from '@angular/http';

...

@NgModule({
    imports: [
        ...
        HttpModule
    ],
    ...
    providers: [
        ...
        ...
        BackendRequestClass,
        { provide: APP_INITIALIZER, useFactory: (config: BackendRequestClass) => () => config.load(), deps: [BackendRequestClass], multi: true }
    ],
    ...
});

эти строки вызовут метод load () из класса BackendRequestClass перед запуском приложения.

убедитесь, что вы установили "HttpModule" в разделе "импорт", если вы хотите сделать http-вызовы на серверную часть с помощью встроенной библиотеки angular2.

b) создайте класс и назовите файл "backend.запрос.ТС":

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class BackendRequestClass {

    private result: Object = null;

    constructor(private http: Http) {

    }

    public getResult() {
        return this.result;
    }

    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('http://address/of/your/backend/endpoint').map( res => res.json() ).catch((error: any):any => {
                reject(false);
                return Observable.throw(error.json().error || 'Server error');
            }).subscribe( (callResult) => {
                this.result = callResult;
                resolve(true);
            });

        });
    }
}

c) чтобы прочитать содержимое вызова backend, вам просто нужно ввести BackendRequestClass в любой класс по вашему выбору и звоните getResult (). Пример:

import { BackendRequestClass } from './backend.request';

export class AnyClass {
    constructor(private backendRequest: BackendRequestClass) {
        // note that BackendRequestClass is injected into a private property of AnyClass
    }

    anyMethod() {
        this.backendRequest.getResult(); // This should return the data you want
    }
}

Дайте мне знать, если это решает вашу проблему.

вместо того, чтобы ваша точка входа вызывала сам bootstrap, вы можете создать и экспортировать функцию, которая выполняет эту работу:

export function doBootstrap(data: any) {
    platformBrowserDynamic([{provide: Params, useValue: new Params(data)}])
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

вы также можете разместить эту функцию на глобальном объекте, в зависимости от вашей установки (webpack/SystemJS). Он также AOT-совместим.

Это имеет дополнительное преимущество для задержки начальной загрузки, когда это имеет смысл. Например, когда вы получаете эти данные пользователя как вызов AJAX после того, как пользователь заполняет форму. Просто вызовите экспортированный функция bootstrap с этими данными.

единственный способ сделать это-предоставить эти значения при определении ваших поставщиков:

bootstrap(AppComponent, [
  provide(RequestOptions, { useFactory: () => {
    return new CustomRequestOptions(/* parameters here */);
  });
]);

затем вы можете использовать эти параметры в свой CustomRequestOptions класс:

export class AppRequestOptions extends BaseRequestOptions {
  constructor(parameters) {
    this.parameters = parameters;
  }
}

если вы получаете эти параметры из запроса AJAX, вам нужно асинхронно загрузиться следующим образом:

var appProviders = [ HTTP_PROVIDERS ]

var app = platform(BROWSER_PROVIDERS)
  .application([BROWSER_APP_PROVIDERS, appProviders]);

var http = app.injector.get(Http);
http.get('http://.../some path').flatMap((parameters) => {
  return app.bootstrap(appComponentType, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(/* parameters here */);
    }})
  ]);
}).toPromise();

см. Этот вопрос:

• Angular2 bootstrap с данными из ajax вызов(ы)

Edit

поскольку у вас есть данные в HTML, вы можете использовать следующее.

вы можете импортировать функцию и вызвать ее с параметрами.

вот пример основного модуля, который загружает ваше приложение:

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(params) {
  bootstrap(AppComponent, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(params);
    });
  ]);
}

затем вы можете импортировать его с главной страницы HTML следующим образом:

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

см. Этот вопрос: передать постоянные значения в угловой от _макет.cshtml.