Как я могу динамически отображать компонент со сложными зависимостями, введенными в его конструктор? ⇐ CSS

[Anonymous]

Я пытаюсь динамически загрузить компонент в ViewContainerRef , а конструктор компонента зависит от нескольких служб (например, httpclient , пользовательская служба и т. Д.). Тем не менее, я получаю ошибку, связанную с пропущенными провайдерами. Вот что я пробовал до сих пор:
инъекционный инжектор и использование его с помощью CreateComponent .
вручную, обеспечивая зависимости в модуле, где компонент объявлен.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoggingService } from './logging.service';

@Component({
selector: 'app-dynamic',
template: `
Dynamic Component Loaded!
`,
})
export class DynamicComponent {
constructor(private http: HttpClient, private loggingService: LoggingService) {
console.log('DynamicComponent initialized with HttpClient and LoggingService');
}
}

import {
Component,
ComponentRef,
Injector,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
selector: 'app-root',
template: `Load Dynamic Component
`,
})
export class AppComponent {
@ViewChild('container', { read: ViewContainerRef, static: true })
container!: ViewContainerRef;

constructor(private injector: Injector) {}

loadComponent() {
const componentRef: ComponentRef = this.container.createComponent(DynamicComponent, {
injector: this.injector, // Provide the injector to resolve dependencies
});

const instance = componentRef.instance;
console.log('Dynamic component instance:', instance);
}
}
< /code>
Что я ищу: < /p>

Решение, которое позволяет динамическому рендерингу компонента с правильной инъекцией зависимости. /li>
Подход, который не ставит под угрозу модульности и избегает ручного управления зависимостями. < /li>
Бонус: как добавить пользовательских поставщиков в динамически созданный компонент. >
< /ul>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ected-into