如何解决Angular 指令,匹配 ElementId 的高度
在 DOM 中,我有 2 个并排的元素。
我希望右元素始终与左元素具有相同的高度。右边的元素可能比左边的元素有更多的内容,并且在这种情况下会有一个滚动条。 (否则这可以通过 flexbox 实现)
我通过创建一个指令并将其放入正确的元素 div 来实现这一点。 它将左元素 div 的 id 作为 @Input 。它读取左元素的高度并更新右元素的 style.height。这似乎工作正常,但我觉得这不是实现这一目标的最佳 Angular 方式。
实现这一目标的最佳 Angular 方式是什么?
export class MatchHeightDirective implements AfterViewChecked {
// class name to match height
@Input() myMatchHeight: any;
constructor(private el: ElementRef) {
}
ngAfterViewChecked() {
this.matchHeight(this.el.nativeElement,this.myMatchHeight);
}
@HostListener('window:resize')
onResize() {
this.matchHeight(this.el.nativeElement,this.myMatchHeight);
}
matchHeight(element: HTMLElement,id: string) {
// match height logic here
if (!element) return;
const observable: HTMLElement = document.getElementById(id);
if (!observable) return;
element.style.height = `${observable.clientHeight}px`;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。