Внедрение зависимостей, пытающееся передать не-сервис для многоуровневого абстрактного компонента в Angular 8

#javascript #angular #typescript #dependency-injection #abstract-class

#javascript #angular #typescript #внедрение зависимостей #абстрактный класс

Вопрос:

У меня есть угловой компонент для модального, так что содержимое модального может быть передано следующим образом:

SomeComponent.html:

 <my-modal-component>
     <div> all my content for the modal of SomeComponent goes here!</div>
</my-modal-component>
  

И my-modal-component обрабатывает настройку таких вещей, как модальный стиль, кнопка закрытия и т.д.

Чтобы расширить некоторые опции для всех моих модалов и компонентов, использующих эти модалы, я создал абстрактный класс called my-abstract-component , который на самом деле не является компонентом, а классом, который имеет аналогичные настройки и функции, которые должен иметь каждый компонент (обработка ошибок, настройка / демонтаж и т. Д.).)

Моя проблема в том, что я не могу получить требуемую неслужебную информацию из SomeComponent модального into MyAbstractComponent .

SomeComponent.ts, компонент со всем содержимым, которое будет передано в модальный.

 @Component({ ... })
export class SomeComponent extends MyModalComponent{
    public constructor(    
        @Inject(LoggerService)  logger: LoggerService, // these services are injected as normal
        @Inject(NgbActiveModal) activeModal: NgbActiveModal,
    ) {
        super(activeModal, logger, Components.MyModalComponent);
    }
    ...
}
  

MyModalComponent.ts, модальный компонент, который принимает содержимое, но также имеет свое собственное содержимое. Он содержит некоторые общие модальные функции, такие как закрытие модального. Это расширяет MyAbstractComponent, поскольку он также является компонентом.

 @Component({...}) // this is a real component with a view and module, so it's tagged as such
export class MyModalComponent extends MyAbstractComponent{
    public constructor(
        protected activeModal: NgbActiveModal,
        protected logger: LoggerService,
        component: IComponent, // THIS IS MY PROBLEM
    ) {
        super(logger, component);
    }
    ...
}
  

MyModalModule.ts

 @NgModule({
    declarations: [ MyModalComponent],
    imports: [
        CommonModule,
        NgbModule
    ],
    providers: [
        LoggerService
        // is it possible to somehow put the IComponent here?
    ],
    exports: [ MyModalComponent, ],
    entryComponents: [ MyModalComponent, ]
})
export class MyModalModule{ }
  

MyAbstractComponent.ts, абстрактный компонент для всех компонентов, включает в себя общие функции, такие как ошибки регистрации, настройка, удаление и т. Д.

 /* Acts like a component, but is not flagged as a real component because it doesn't have a view or module*/
export abstract class MyAbstractComponent implements OnInit, OnDestroy {
    public constructor(
        protected logger: LoggerService,
        protected component: IComponent, // content passed in the constructor because it's not real dependency injection of services
    ) {
        this.logger= logger;
        this.component = component;
    }
    ...
}
  

Информация, которую я пытаюсь передать, — это информация, используемая для ведения журнала, вот пример Components.MyModalComponent :

 export namespace Components {
    export const MyModalComponent: IComponent = {
        userFriendlyName: "My Modal Component",
        ...
    };
}
  

Как вы можете видеть, мне нужно получить некоторую информацию о компоненте из класса компонентов верхнего уровня ( SomeComponent ) на несколько уровней в MyAbstractComponent `. Если бы мне нужно было пройти только один уровень, я мог бы передать информацию о компоненте через суперконструктор. Однако, поскольку информация об этом компоненте должна проходить через второй уровень компонента, где только сервисы могут быть частью внедрения в компонент, я получаю эту ошибку, касающуюся DI:

ERROR in Can't resolve all parameters for MyModalComponent in MyModalComponent.ts: ([object Object], [object Object], ?).

Где ? — информация о компоненте, которая не является сервисом.

Я мог бы передавать требуемую информацию по-разному (через @Input или с помощью getter / setter), но в идеальном мире все было бы готово в конструкторе. Я уверен, что кто-то еще сталкивался и решал эту проблему раньше. Есть мысли?

Комментарии:

1. Что такое компоненты. MyModalComponent ? Является ли экземпляр MyModalComponent ? Пожалуйста, поместите код класса Components.

2. @Rodrigo это просто информация, такая как имена компонентов для ведения журнала. Я включил его экземпляр для справки. Пожалуйста, посмотрите мои правки.