angular - 我应该在 Angular 9 中使用什么来代替 @HostBinding("@grow") ?
问题描述
我有这个指令,我用它来动画组件高度的变化。但是自从我们从 Angular 8 更新到 9 后,它看起来几乎@grow
不再支持 hostPropertyName。这是指令:
import {
Directive,
OnChanges,
Input,
ElementRef,
HostBinding
} from "@angular/core";
@Directive({
selector: "[smoothHeight]",
host: { "[style.display]": '"block"' }
})
export class SmoothHeightDirective implements OnChanges {
@Input()
smoothHeight;
pulse: boolean;
startHeight: number;
constructor(private element: ElementRef) {}
@HostBinding("@grow")
get grow() {
return { value: this.pulse, params: { startHeight: this.startHeight } };
}
setStartHeight() {
this.startHeight = this.element.nativeElement.clientHeight;
}
ngOnChanges() {
this.setStartHeight();
this.pulse = !this.pulse;
}
}
Chrome 抛出以下错误:
core.js:6185 ERROR TypeError: Cannot read property '11' of null
Safari 想出了这个:
TypeError: null is not an object (evaluating 'componentLView[RENDERER]')
和火狐:
ERROR TypeError: "componentLView is null"
关于我做错了什么以及如何解决它的任何建议?
解决方案
看起来问题出在 Angular (9.1.2) 上,在更新 Angular 后它似乎可以工作。
推荐阅读
- c# - 如何从 html 发送请求查询字符串?
- python - pip 升级:“python -m pip install --upgrade”说已经是最新的(18.0),“pip --version”说(10.0.1)
- macos - Maven:无法解析以下工件。在我的 Mac 上将朋友的 .m2 文件夹放在哪里?
- html - 无法将“小”标签与“标签”标签内联
- php - PHP 和正则表达式:如何使用 unicode 单词(包括带有 ' 的缩写)拆分字符串?
- c++ - 物理向量构造函数,幅度和单位向量函数不起作用c ++
- python - Python shell 下的 Wiringpi
- php - 如何在子functions.php中覆盖父functions.php
- java - Java导入包理解
- java - mvn 未被识别为内部或外部命令