Question

我正在尝试通过拖动来调整元素大小（如so）。我写了一个简单的指令（稍后将处理ghostbar）：

@Directive({ selector: '[drag-resize]' })
export class DragResizeDirective {
    private dragging: boolean;

    constructor(el: ElementRef, renderer: Renderer2) {
        renderer.listen('window', 'mouseup', (e) => {
            if (this.dragging) {
                el.nativeElement.style.backgroundColor = 'red'; // Works fine.
                el.nativeElement.style.height = `${e.pageY + 2}px`; // Not so much.
                this.dragging = false;
            }
        });
    }

    @HostListener('mousedown') onMouseDown() {
        this.dragging = true;
    }
}

问题是我无法改变元素的高度。其他款式做得很好。我正在使用Angular 4.0.3。

计算属性：

display: block;
height: 244.781px;
left: 0px;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 655.422px;
width: 1793px;

* renderer.setStyle()也不起作用。

**我想要调整大小的元素是一个网格图块（Angular Material的md-grid-tile）。

***指令适用于其他元素。

Answer 1

编辑2：

我已经挖掘了md-grid-list实施。每次触发ngAfterContentChecked（code）时都会重新计算行高。这发生在每次鼠标事件之后，并且可能是设置高度无效的原因。

从md-grid-list文档中我可以看到您还可以将rowHeight（例如200px）输入参数传递给`md-grid-list。这似乎是设置行高的最简洁方法，但会将所有行缩放到相同的大小。

如果这不是您想要达到的效果，您可以尝试在ngAfterViewChecked生命周期钩子中设置高度。

编辑：

如果您的代码尝试调整display: inline元素的大小，您首先必须应用例如display: inline-block到它。否则它将忽略高度值。

style.height属性要求数字值具有单位（例如%，px，rem，em，vh）。

这应该有效：

el.nativeElement.style.height = `${e.pageX + 2}px`;

无法更改元素的高度

1 个答案: