splincodewd
@splincodewd
Developer

Как базовому классу назначить контекст в Angular (with TypeScript)?

Вот у меня есть базовый компонент:
// VirtualComponent.ts
export class VirtualComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit { 

constructor(public ref: ChangeDetectorRef,
                public zone: NgZone,
                public route: ActivatedRoute,
                public router: Router,
                public applicationRef: ApplicationRef) {

}

// .. методы для вызова change detection

}


Вот так я создаю обычные компоненты, как оказалось, это не очень удобно в силу того, что каждый компонент теперь должен содержать теже параметры, что и у родительского конструктора
// step-list.component.ts
@Component({
    // ..
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StepComponent extends VirtualComponent {

    constructor(public appState: AppState,
                public dataService: DataService,
                private titleService: Title,
                public ref: ChangeDetectorRef,
                public zone: NgZone,
                public route: ActivatedRoute,
                public router: Router,
                public applicationRef: ApplicationRef
    ) {
       super(appState, ref, zone, route, router, applicationRef);
   }


}


По началу мне было не лень писать, но теперь это совершенно не удобно, если у меня меняется конструктор у родительского класса, то для каждого класса компонента мне нужно сделать изменения для передачи новых параметров в super

Я сначала попытался сделать проще
export class VirtualContext {

constructor(public ref: ChangeDetectorRef,
                public zone: NgZone,
                public route: ActivatedRoute,
                public router: Router,
                public applicationRef: ApplicationRef) {

}

}

export class VirtualComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit { 

  public ref: ChangeDetectorRef;
  public zone: NgZone;
  // ..

constructor(public virtualContext: VirtualContext) {

 this.ref = virtualContext.ref;
 this.zone = virtualContext.zone;
 // ..

}

// .. методы для вызова change detection

}


и тогда в обычных компонентах мне надо было делать так:
// step-list.component.ts
@Component({
    // ..
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StepComponent extends VirtualComponent {

    constructor(public appState: AppState,
                public dataService: DataService,
                private titleService: Title,
                public virtualContext: VirtualContext
    ) {
       super(virtualContext);
   }


}


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

Но такая идея оказалась нежизнеспособной:
1. Angular стал ругаться, что VirtualContext no provide, ну хорошо, то есть проблемы с Dependence Injection
2. Я добавил в @NgModule в provides [VirtualContext]
3. Но он стал ругаться на то, что теперь ChangeDetectorRef no provide, а когда я стал добавлять в @NgModule в provides [VirtualContext, ChangeDetectorRef, ..]
4. То тут уже TypeScript стал ругаться, что у них нет типа для того, чтобы инжектить все это добро

В общем, подскажите, что мне делать, чтобы в конструктор родительского класса не передавать постоянно кучу параметров и не зависитеть от изменений конструктора базового класса?
  • Вопрос задан
  • 208 просмотров
Пригласить эксперта
Ответы на вопрос 1
splincodewd
@splincodewd Автор вопроса
Developer
Пока нарыл только это:
http://stackoverflow.com/questions/39038791/inheritance-and-dependency-injection
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 окт. 2021, в 12:54
10000 руб./за проект
26 окт. 2021, в 12:38
10000 руб./за проект
26 окт. 2021, в 12:35
500 руб./за проект