Angular2 – динамически загружать компонент из модуля

в моем угловом приложении у меня есть следующее:

export class MyComponent { subcompPath = "path-to-subcomp#SubcompClassName"; @ViewChild("placeholder", { read: ViewComponentRef }) placeholderRef: ViewComponentRef; /* Constructor where Compiler, ComponentFactoryResolver are injected */ loadSubcomponent() { let [path, componentName] = this.subcompPath.split("#"); (window).System.import(path) .then((module: any) => module[componentName]) .then((type: any) => { return this._compiler.compileComponentAsync(type) }) .then((factory: any) => { let componentRef = this.placeholderRef.createComponent(factory, 0); }); } } 

Мой подкомпонент объявляет поставщиков и прочее, директивы и трубы.

И теперь RC6 снова сломает все. Компоненты не могут объявлять директивы и каналы, но они должны находиться в модуле, где объявлен компонент. Поэтому мне приходится загружать SystemJS не сам компонент, а модуль. Хорошо, и тогда я должен использовать

 return this._compiler.compileModuleAndAllComponentsAsync(type) 

Хорошо, но как мне получить ссылку на завод этого конкретного компонента? Эта фабрика – это все, что мне нужно, placeholderRef хочет ее в методе createComponent, правильно?

Я попытался выкопать исходный код angular2 из github, но он довольно обширен, я должен попробовать VS-код или что-то еще, с intellisense, но я ленив … и я должен прочитать этот материал из документации, которая довольно туманна в angular.io для этого конкретного аргумента, который представляет собой ленивую загрузку компонентов и модhive без маршрутизатора.

Любая помощь приветствуется, я думаю, что решение прост в применении, но трудно найти без официальной документации.

Основываясь на ответе yurzui, я пришел к следующему коду:

 export class MyComponent { subcompPath = "path-to-subcompMODULE#SubcompClassName"; @ViewChild("placeholder", { read: ViewComponentRef }) placeholderRef: ViewComponentRef; /* Constructor where Compiler, ComponentFactoryResolver are injected */ loadSubcomponent() { let [modulePath, componentName] = this.subcompPath.split("#"); (window).System.import(modulePath) .then((module: any) => module["default"]) // Or pass the module class name too .then((type: any) => { return this._compiler.compileModuleAndAllComponentsAsync(type) }) .then((moduleWithFactories: ModuleWithComponentFactories) => { const factory = moduleWithFactories.componentFactories.find(x => x.componentType.name === componentName); // Crucial: componentType.name, not componentType!! let componentRef = this.placeholderRef.createComponent(factory, 0); }); } } 

Обновить:

Если вы хотите использовать его вместе с компиляцией aot, вы должны вручную предоставить компилятор как

 export function createJitCompiler () { return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler(); } ... providers: [ { provide: Compiler, useFactory: createJitCompiler} ], 

пример

Старая версия

Это может помочь вам:

 this.compiler.compileModuleAndAllComponentsAsync(DynamicModule) .then(({moduleFactory, componentFactories}) => { const compFactory = componentFactories .find(x => x.componentType === DynamicComponent); const cmpRef = this.placeholderRef.createComponent(compFactory, 0); 

Смотрите также

  • связанный с ответом r с примером
  • Как использовать переменную для определения templateUrl в Angular2
  • образец кода из углового исходного кода
  • Запуск угловых и угловых рамок рядом друг с другом
  • Что такое ngDefaultControl в Angular?
  • Перезагрузка текущего состояния - обновление данных
  • BehaviorSubject vs Observable?
  • Свойство 'map' не существует в типе 'Observable '
  • AngularJS: Предотrotation ошибки $ digest уже выполняется при вызове $ scope. $ Apply ()
  • Как связать Http-вызовы в Angular2?
  • ключ доступа и значение объекта с помощью * ngFor
  • AngularJS Upgrade (от 1.5 до 1.6.1.7) Делает привязку видимости области действия неопределенной
  • Передача параметров сервера asp.net в приложение Angular 2
  • Угловая 2 Загрузка файла из типа ввода = файл
  • Interesting Posts

    Клавиатура – значения задержки повторения / повторения в Win7

    C #: Как вы редактируете элементы и подэлементы в списке?

    Gradle – Что такое ненулевое значение выхода и как его исправить?

    как мы можем использовать startActivityforResult () для намерения электронной почты?

    Как добавить вложение в новое письмо в Lotus Notes из командной строки

    Поддерживает ли Microsoft Visual Studio 2010 c99?

    Лучший XML-парсер для Java

    Почему эта функция возвращает каждый раз другое значение?

    Преобразование вложенных classов case в вложенные Карты с использованием Shapeless

    широковещательный приемник для пропущенного вызова в android

    Почему объектные объекты более объектно-ориентированные?

    Mongoose – название коллекции Force

    Отражение частного поля из базового classа

    Как отключить jquery-ui draggable?

    Почему этот цикл создает «предупреждение: итерация 3u вызывает неопределенное поведение» и выводит более 4 строк?

    Давайте будем гением компьютера.