Исправлено: Angular 9: недекорированные базовые классы, использующие функции Angular - PullRequest
Новая
       5

Исправлено: Angular 9: недекорированные базовые классы, использующие функции Angular

3 голосов
/ 17 февраля 2020

Я недавно обновился до Angular v9 и, как определено в журнале изменений, не рекомендуется иметь базовый класс без украшений, который использует Angular функции или расширен директивой или компонентом.

Итак, у меня в приложении много миксинов, что-то вроде этого:

Уничтожить: 

export const Destroy = <T extends Constructor>(base: T = class {} as T) =>
  class extends base implements OnDestroy {
    destroy$ = new Subject<boolean>();

    ngOnDestroy(): void {
      this.destroy$.next(true);
      this.destroy$.complete();
    }
  };

Прокрутка: 

export const Scroll = <T extends Constructor>(base: T = class {
} as T) =>
  class extends base {
    public scrollToFirstError(form: FormGroup, scrollSelector?: string) {
      form.markAllAsTouched();
      const target = jQuery('.ng-invalid:not("form")').first();
      const scrollContainer = jQuery(scrollSelector || 'html,body');
      const subHeaderHeight = scrollSelector ? 0 : Number.parseInt(getComputedStyle(document.documentElement)
        .getPropertyValue('--height').trim(), 10);
      scrollContainer.animate(
        { scrollTop: jQuery(target).offset().top - jQuery(scrollContainer).offset().top - subHeaderHeight - 50 }, 'slow');
      target.focus();
    }
  };

Расширение его в моем компоненте, например, 

export class ComponentA extends Destroy(Scroll)

и попытка доступа к свойствам этих миксинов выдает следующие ошибки: 

this.apiService.getData().pipe(takeUntil(this.destroy$)... // Property 'destroy$' does not exist on type 'ComponentA'.


this.scrollToFirstError(this.form, '.modal'); // Property 'scrollToFirstError' does not exist on type 'ComponentA'.

Может кто-нибудь пожалуйста помочь мне с предложением, чтобы решить это? Заранее спасибо!

******** Обновление *********

В моем компоненте: 

export const MixinedClasses: any = Destroy(Scroll());

  @Component({
  selector: 'app-loan-list',
  templateUrl: './loan-list.component.html',
  styleUrls: ['./loan-list.component.scss']
})
export class Component extends MixinedClasses {}
...