Как внедрить службу родительского компонента в динамический компонент в Angular?

Я использую Angular 8, и у меня есть динамически созданный компонент. У меня есть родительский компонент с сервисом в массиве провайдеров. Как я могу вставить тот же экземпляр родительского MyService в динамический компонент? Без динамического компонента я могу добиться этого, просто вставив в конструктор дочернего компонента эту службу. Но как я могу это сделать с помощью динамического компонента? Вот код создания динамического компонента

@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    providers: [MyService],
})
export class ParentComponent {
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private myService: MyService,
    ) {
    }

    createDynamicComponent() {
        const injector: Injector = Injector.create({
            providers: [
                {
                    provide: MAT_DATE_FORMATS,
                    useValue: getMatDateFormat(this.dateFormat),
                },
            ],
        })
        this.dynamicPlaceholder.clear()
        const componentFactory = this.componentFactoryResolver
            .resolveComponentFactory(DynamicComponent)
        const componentRef = this.dynamicPlaceholder
            .createComponent(componentFactory, 0, injector)
    }
}

angular angular-dependency-injection angular-dynamic-components
person mr__brainwash    schedule 03.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема заключалась в следующих строках:

const injector: Injector = Injector.create({
      providers: [
         {
            provide: MAT_DATE_FORMATS,
            useValue: getMatDateFormat(this.dateFormat),
         },
      ],
})

Я создал инжектор динамических компонентов с нуля. Так что он ничего не знал о родительском инжекторе. Как следствие - не знаю о родительских провайдерах. Все, что мне нужно сделать, это добавить параметр parent к функции Injector.create:

const injector: Injector = Injector.create({
          providers: [
             {
                provide: MAT_DATE_FORMATS,
                useValue: getMatDateFormat(this.dateFormat),
             },
          ],
          parent: this.injector
})

Где this.injector вводится в конструктор родительского компонента:

constructor(private injector: Injector) {
}
person mr__brainwash    schedule 04.09.2019