Загрузка нескольких динамических компонентов Angular CLI в родительский компонент

Question

Я разрабатываю угловое приложение с динамическими видами. Таким образом, пользователи могут настроить вид по своему выбору (что просматривать / нет). Настроить деталь можно легко, но часть просмотра данных довольно сложна с точки зрения углов (или я не могу понять это). Я хочу загрузить несколько динамических компонентов с загруженными данными (например, если их тег выбора находится внутри этого динамического компонента, я хочу загрузить его данные опций и добавить этот компонент в мой основной компонент). Другое дело, я хочу проверить, какие динамические компоненты хотят загрузить в основной компонент. Является ли это возможным? Кто-нибудь делал это раньше?

Answer 1

Надеюсь, эта справка:

app.component.ts:

import { Component, NgModule, Compiler } from '@angular/core';
import { RouterModule, Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {

  constructor(private compiler: Compiler,
              private router: Router) {}

  createDynamic() {
    const template = '<span>generated on the fly</span>';
    const tmpCmp = Component({template: template})(class {});

    const routes = [{path: '', component: tmpCmp}];
    const tmpModule = NgModule({
      imports: [RouterModule.forChild(routes)],
      declarations: [tmpCmp]})(class {});

    this.compiler.compileModuleAsync(tmpModule).then((module) => {

      const appRoutes = [...this.router.config];

      const route = {
        path: 'dynamic',
        loadChildren() { return module }
      };

      appRoutes.push(route);

      this.router.resetConfig(appRoutes);
      this.router.navigateByUrl('/dynamic');
    });
  }
}

app.component.html:

<p>
  Dynamic Routes
</p>


<router-outlet></router-outlet>

<button (click)="createDynamic()">Go Dynamic</button>

загрузка компонента динамически, стекблиц

Answer 2

Может быть, вы ищете:

• условный импорт - вот плагин веб-пакета для этого: https://www.npmjs.com/package/webpack-conditional-loader

• динамический импорт - https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

  export default function pageLoader(platform) {
     switch (platform="desktop") {
       case "mobile":
         return import("components/MyMobileComponent");
  
       case "desktop":
         return import("components/MyDesktopComponent");
     }
  }