Угловой 7 - Вставить новый динамический компонент в существующий модуль

Question

Я довольно новичок в Angular и до сих пор не понимаю, как на самом деле работают некоторые вещи.
Я пытаюсь смоделировать $ compile из angularJS

Можно ли вставить динамически созданный компонент всуществующий модуль?Мол, внедрить его в AppModule, а затем перекомпилировать все на лету ... Или получить список модулей, которые импортируются каким-то другим модулем (например, AppModule)

Вот что у меня есть:

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
private comp: ComponentRef<any>;

private createComponentFromTemplate(template: string, modules: any = []) {
  let this_ = this;
  @Component({
    selector: 'some-tpl',
    template: template
  })
  class TmpComponent {
  }


  @NgModule({
    imports: modules, //here is the problem
    declarations: [
      TmpComponent
    ],
    exports: [
      TmpComponent
    ]
  })
  class TmpModule {
  }

  let mod = this.compiler.compileModuleAndAllComponentsSync(TmpModule);
  let factory = mod.componentFactories.find((c) => c.componentType === TmpComponent);
  this.comp = this.vc.createComponent(factory, 0, this.injector);
  //dynamic component is later destroyed
}

Проблемы:
Это работает совершенно нормально, но Я бы хотел избежать создания отдельного модуля. HTML-код, содержащийся в строке "template", может содержать что угодно, что может быть довольно проблематично, еслимы используем некоторые другие компоненты / директивы внутри шаблона.Проблема решается путем введения «модулей», массива модулей, который должен содержать все необходимые модули для правильной компиляции нового компонента

Мне нужно это, чтобы я мог включить динамическую обработку данных:
Данныеберется из БД через службу REST
В зависимости от типа данных и службы, используемой для ее получения, выполняется различная обработка (например, преобразование электронной почты в рабочую ссылку электронной почты, представление списка объектов в таблице и т. д.)

Заранее спасибо

Answer 1

Итак, мой мыслительный процесс состоит в том, что есть два способа сделать это.Я бы отказался от того, как вы это делаете, и вместо этого условно проверил данные в вашем пользовательском компоненте.Одним из способов является использование источников событий и передача данных через компонент:

Страница с использованием динамического компонента

<dynamic-component [settings]="{ type: 'customType', params: { number: 1 } }"></dynamic-component>

Динамический компонент

@Component({
  selector: 'dynamic-component',
  templateUrl: './dynamic-component.html',
  styleUrls: ['./dynamic-component.style.scss'],
})
export class DynamicComponent implements OnInit {
  @Input()
  settings: any

constructor() {     
  if (this.settings.type === 'customType') {
     // Handle conditional data
    }
  }

Другой способ - обработкаданные между сервисами.

Служба

@Injectable()
export class SharedService {
sharedData: BehaviorSubject<any> = new BehaviorSubject<any>(null)
  constructor() {}
}

Чтобы передать данные со (любой) страницы, внедрите службу в конструктор и вызовите .next для субъекта поведения.

constructor(private sharedService: SharedService) {
  sharedService.sharedData.next({ type: 'customType', otherParam: 'foo' })
}

Затем подпишитесь на данные и проверьте соответственно

Динамический компонент

@AutoUnsubscribe()
@Component({
  selector: 'dynamic-component',
  templateUrl: './dynamic-component.html',
  styleUrls: ['./dynamic-component.style.scss'],
})
export class DynamicComponent implements OnInit, OnDestroy {

// Subscriptions
sharedSub$: Subscription
constructor(private sharedService: SharedService) {     
  this.sharedSub$ = sharedService.sharedData.subscribe((data) => {
if (data.type === 'customType') {
   // Now you have the conditional data
}
  })

 ngOnDestroy() {}
}

@ AutoUnsubscribe просто мое предложение для обработки памяти и предотвращения утечек.