В этом посте я продемонстрирую, как передавать внешние данные в приложение Angular перед загрузкой приложения. Эти внешние данные могут быть данными конфигурации, устаревшими данными, обработанными сервером и т. Д.
Когда я пытался интегрировать приложение Angular 2 в нашу существующую кодовую базу, я столкнулся с этой проблемой. После быстрого исследования и передового опыта кажется, что есть несколько способов заставить это работать.
- Через 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 });
Надеюсь, это вам помогло. Отзывы, комментарии или другие подходы приветствуются.