如何向自定义Angular4指令（appResizer）传递字符串？

嗨，我来帮你搞定这个指令传参的问题！你已经在指令里引入了@Input，这步完全走对了，接下来只需要把这个输入属性和指令绑定起来，就能轻松从HTML页面传递字符串啦。下面一步步来：

1. 完善指令的@Input定义 #

首先在你的指令类里，给@Input定义一个属性——如果想简化HTML里的绑定写法，直接用指令选择器的名字appResizer作为输入属性名就好；要是需要更明确的语义，也可以自定义名字。示例代码如下：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appResizer]'
})
export class AppResizerDirective implements OnInit {
  // 方式1：和指令选择器同名，HTML绑定更简洁
  @Input() appResizer!: string; 

  // 方式2：自定义语义化名字，比如用来标识目标大div
  // @Input() targetContainerId!: string;

  constructor(private elRef: ElementRef) {}

  ngOnInit(): void {
    // 这里就能拿到HTML传过来的字符串了
    console.log('从页面收到的参数:', this.appResizer);
    // 后续可以用这个参数做逻辑处理，比如关联页面里的大div
  }
}

2. 在HTML页面传递字符串 #

现在在两个页面的指令元素上，直接传递字符串即可，分两种场景：

传递固定字符串 #

如果是固定的标识字符串，用方括号包裹指令名，里面加单引号：

<!-- 页面1：传递标识"main-page-container" -->
<div [appResizer]="'main-page-container'">...</div>

<!-- 页面2：传递标识"secondary-page-container" -->
<div [appResizer]="'secondary-page-container'">...</div>

传递组件变量中的字符串 #

如果字符串是动态的（比如存在组件的变量里），直接写变量名即可（不用单引号）：

<!-- 假设组件类里定义了：resizerTarget = 'dynamic-large-div' -->
<div [appResizer]="resizerTarget">...</div>

3. 结合你的场景优化（可选） #

既然你提到页面里有可显示/隐藏的大div，这个传递的字符串可以用来标识该div的ID或类名，然后在指令里直接定位并处理它。比如：

指令里补充逻辑：

ngOnInit(): void {
  // 根据传递的ID找到目标大div
  const targetLargeDiv = document.getElementById(this.appResizer);
  if (targetLargeDiv) {
    // 这里就可以处理该div的显示隐藏、尺寸调整等逻辑了
    console.log('找到目标大容器:', targetLargeDiv);
    // 比如监听它的显示状态变化，调整指令宿主元素的尺寸
  }
}

对应的HTML：

<!-- 页面里的可隐藏大div -->
<div id="main-large-div" [style.display]="isLargeDivVisible ? 'block' : 'none'">
  <!-- 大div内容 -->
</div>

<!-- 绑定指令时传递大div的ID -->
<div [appResizer]="'main-large-div'">...</div>

这样就能在两个页面给同一个指令传递不同的字符串参数，实现代码复用的同时满足各自的场景需求啦！

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