我最近更新到了Angular v9,并且在更改日志中进行了定义,不推荐使用具有未经修饰的基类,该基类使用Angular功能或由指令或组件扩展。
所以我的应用程序中有很多mixin像这样:
销毁:
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();
}
};
Scroll:
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)
并且尝试访问这些mixin的属性会引发以下错误:
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 {}
只需将Destroy
和Scroll
转换为@component装饰的组件,它就可以正常工作。
添加:
// Destroy const becomes a decorated class
@Component({
selector: 'app-destroy'
})
export class Destroy implements OnDestroy{}
// Scroll const becomes a decorated class
@Component({
selector: 'app-scroll'
})
export class Scroll{}
这只是一个想法,您必须针对特定的实现使其正确。
老实说,我不太了解通过使用base
作为参数来扩展它们的方式,因此您可能需要使用标准类重新考虑整个方法。