Как установить вычисленную ширину на элементе хоста, используя директиву Angular 2

Question

У меня есть директива, названная resize, которая обрабатывает некоторые события мыши и вычисляет width при перемещении мыши, и она выдает ширину из директивы.

Я использую эту директиву для div внутри компонента, скажем small. Компонент small имеет родителя, где он используется. Компонент small имеет width, установленный на 200px. Теперь я хотел бы установить ширину, которая вычисляется в директиве на элементе хоста компонента small.

Вот код:

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

Я не уверен, что правильно понимаю. Но если вы хотите указать ширину для компонента, который имеет этот шаблон:

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

Тогда сделайте это так:

<div class="root">
 <div>... some elements</div>
 <div class="sizer" resize (resizer)="onResize($event)"></div>
</div>

А в small.component.ts примерно так:

constructor(
  private renderer: Renderer2,
  private elementRef: ElementRef,
) {}

onResize(width) {
  this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${width}px`);
}