如何在Angular 2中通过指令为宿主元素设置计算出的宽度

我来帮你搞定这个问题！要把resize指令计算出的宽度同步到small组件的宿主元素上，咱们可以通过组件与指令的通信机制来实现，具体分这几步走：

1. 确保resize指令正确向外发射宽度值 #

首先要确认你的resize指令已经通过@Output装饰器向外暴露了宽度变化的事件。如果还没实现，先补上这部分逻辑：

import { Directive, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[resize]' })
export class ResizeDirective {
  // 定义输出事件，用于向外发射计算后的宽度
  @Output() widthChanged = new EventEmitter<number>();
  private currentWidth = 0;

  @HostListener('mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    // 这里替换成你实际的宽度计算逻辑
    // 示例：假设通过鼠标位置计算宽度
    this.currentWidth = event.clientX;
    // 发射宽度值
    this.widthChanged.emit(this.currentWidth);
  }
}

2. 在small组件中监听指令事件并更新宿主元素 #

接下来修改small组件，监听resize指令的宽度变化事件，然后把值同步到组件的宿主元素上。这里有两种推荐的实现方式：

方式一：使用HostBinding（更符合Angular风格） #

这种方式可以直接绑定宿主元素的样式属性，代码更简洁：

small.component.html

在使用resize指令的div上绑定widthChanged事件：

<div class="root" resize (widthChanged)="onWidthChanged($event)">
  <!-- 组件内部的内容 -->
</div>

small.component.ts

用HostBinding绑定宿主元素的宽度样式，同时处理宽度变化事件：

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-small',
  templateUrl: './small.component.html',
  styleUrls: ['./small.component.css']
})
export class SmallComponent {
  // 绑定宿主元素的width样式，设置默认值200px
  @HostBinding('style.width') hostElementWidth = '200px';

  onWidthChanged(newWidth: number) {
    // 可选：添加边界校验，确保宽度不小于默认值
    const validWidth = Math.max(newWidth, 200);
    // 更新宿主元素宽度
    this.hostElementWidth = `${validWidth}px`;
  }
}

方式二：使用ElementRef（更灵活的操作） #

如果需要对宿主元素做更多自定义操作，可以用ElementRef直接获取元素实例：

small.component.ts

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-small',
  templateUrl: './small.component.html',
  styleUrls: ['./small.component.css']
})
export class SmallComponent {
  constructor(private el: ElementRef) {
    // 初始化默认宽度
    this.el.nativeElement.style.width = '200px';
  }

  onWidthChanged(newWidth: number) {
    const validWidth = Math.max(newWidth, 200);
    // 直接操作宿主元素的样式
    this.el.nativeElement.style.width = `${validWidth}px`;
  }
}

3. 验证效果 #

当你触发鼠标移动事件时，resize指令会计算并发射新的宽度值，small组件接收到这个值后，就会自动把宽度同步到自己的宿主元素上，完美实现需求。

内容的提问来源于stack exchange，提问作者Angela Roux