Question

我有一个名为resize的指令，它处理一些鼠标事件并在鼠标移动时计算width，并从指令中发出宽度。

我在组件内的div上使用此指令说small。组件small具有使用它的父级。 small组件的width设置为200px。现在，我想在small组件的host元素的指令中设置正在计算的宽度。

以下是代码：

small.component.html：

<div class="root">
 <div>... some elements</div>
 <div class="sizer" resize></div>
</div>

small.component.ts：

import { Component, OnChanges, OnInit, EventEmitter, Input, Output } from "@angular/core";
@Component({
    selector: "comp-small",
    providers: [SmallService],
    templateUrl: "./small.component.html",
})
export class Small implements OnInit {
  constructor() {
  }
  // some functionality

}

small.scss：

comp-small {
 width: 200px;
}

parent.component.html：

<comp-small></comp-small>
<div class="blah"></div>

指令调整大小：

import { Directive, Output, EventEmitter, ElementRef, HostListener, Input } from "@angular/core";

@Directive({
    selector: "[resize]"
})
export class Resize {
    private stPoint: number;
    private endPoint: number;
    private root: HTMLElement;
    private width: number;

    @Output() resizer = new EventEmitter();

    constructor(private _el: ElementRef) {
        this.root = this._el.nativeElement;
        console.log("Root Element", this.root);
    }

    @HostListener('mousedown', ['$event'])
    private _onMouseDown(event) {
       this.stPoint = event.pageX;
       console.log("Starting pt", this.stPoint);
    }

    @HostListener('mousemove', ['$event'])
    private _onMouseMove(event) {
        if (this.stPoint) {
            if (event.type === "mousemove") {
                this._endPoint = event.pageX;
                console.log("end pt: mousemove", this.endPoint);
            } 
            this.width = this.endPoint - this.stPoint;
            console.log("This Width", this.width);
            this.resizer.emit(this.width);
        }
    }

    @HostListener('mouseup', ['$event'])
    private _onMouseUp(event) {
        console.log("Width", this.width);
    }
}

如何使用指令中的计算宽度设置comp-small的宽度。任何帮助将不胜感激。

谢谢。

Answer 1

我不确定我是否理解正确。但是，如果要向具有此模板的组件发出宽度：

＆＃xA;＆＃xA;

 ＆lt; div class =“root”＆gt;＆＃xA; ＆lt; div＆gt; ...一些元素＆lt; / div＆gt;＆＃xA; ＆lt; div class =“sizer”resize＆gt;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

然后执行此操作像这样：

＆＃xA;＆＃xA;

 ＆lt; div class =“root”＆gt;＆＃xA; ＆lt; div＆gt; ...一些元素＆lt; / div＆gt;＆＃xA; ＆lt; div class =“sizer”resize（resizer）=“onResize（$ event）”＆gt;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;

＆＃ xA;＆＃xA;

在small.component.ts中是这样的：

＆＃xA;＆＃xA;

 构造函数（＆＃xA;私有渲染器：Renderer2，＆ #xA; private elementRef：ElementRef，＆＃xA;）{}＆＃xA;＆＃xA; onResize（width）{＆＃xA; this.renderer.setStyle（this.elementRef.nativeElement，'width'，`$ {width} px`）;＆＃xA;}＆＃xA;

＆＃xA;

如何使用Angular 2中的指令在主机元素上设置计算宽度

1 个答案: