В этом посте я продемонстрирую, как передавать внешние данные в приложение Angular перед загрузкой приложения. Эти внешние данные могут быть данными конфигурации, устаревшими данными, обработанными сервером и т. Д.

Когда я пытался интегрировать приложение Angular 2 в нашу существующую кодовую базу, я столкнулся с этой проблемой. После быстрого исследования и передового опыта кажется, что есть несколько способов заставить это работать.

  1. Через APP_INITALIZER

Согласно документам Angular 2, это все еще находится под экспериментальным тегом. Я не буду вдаваться в подробности этого подхода, поскольку простой поиск в Google поможет вам.

2) С помощью внедрения зависимостей

a) Вместо прямого вызова кода начальной загрузки Angular оберните код начальной загрузки в функцию и экспортируйте функцию. Эта функция также может принимать параметры.

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./src/app";
export function runAngular2App(legacyModel: any) {
       platformBrowserDynamic([
           { provide: "legacyModel", useValue: model }
       ]).bootstrapModule(AppModule)
       .then(success => console.log("Ng2 Bootstrap success"))
       .catch(err => console.error(err));
}

В приведенном выше примере «legacyModel» вводится в Angular и будет доступен для использования службами и компонентами.

б) Затем в любые сервисы или компоненты мы можем внедрить «унаследованную модель» и получить к ней доступ.

import { Injectable } from "@angular/core";
@Injectable()
export class MyService {
   constructor(@Inject("legacyModel") private legacyModel) {
      console.log("Legacy data — ", legacyModel);
    }
 }

c) Требуйте приложение, а затем запустите его.

require(["myAngular2App"], function(app) {
   app.runAngular2App(legacyModel); // Input to your APP
});

Надеюсь, это вам помогло. Отзывы, комментарии или другие подходы приветствуются.