在Angular CDK拖放中,要实现动态占位符高度,可以使用CdkDragPlaceholder
指令配合CSS样式来实现。以下是一个示例解决方法:
import { Directive, ElementRef, Input, HostBinding } from '@angular/core';
@Directive({
selector: '[dynamicPlaceholderHeight]'
})
export class DynamicPlaceholderHeightDirective {
@HostBinding('style.height.px') @Input() dynamicPlaceholderHeight: number;
constructor(private elementRef: ElementRef) { }
ngAfterViewInit() {
this.elementRef.nativeElement.classList.add('dynamic-placeholder-height');
}
}
.dynamic-placeholder-height {
transition: height 0.2s;
}
CdkDragPlaceholder
指令,并绑定动态占位符高度:
在上述示例中,我们使用dynamicPlaceholderHeight
绑定输入属性来设置动态占位符高度。在CSS中,我们使用过渡效果使高度的变化平滑过渡。
需要注意的是,上述示例中的代码只是一个基本示例,你需要根据自己的需求进行修改和扩展。