Question

嗨，我正在制作一个拖动指令，但由于它的工作方式，我无法让它在动态对象上工作，因为它在输入中调用 id。

@Input()
set Drag(options: any) {
   this.stickerElement = document.getElementById(options.id);
}

当元素不是动态的时哪个工作正常：

<div id="sticker" class="issues" [Drag]="{id: 'sticker'}">

但是当它动态设置时，我无法弄清楚如何动态插入 ID。

<div [attr.id]="'Session' + Day.id" [Drag]="{id:'Session' + Day.id}"></div>

当您使用它时，我尝试将 this.stickerElement 与 @HostListener 一起设置，但这允许指令冒泡并使用子元素。我想我可以解决它，但它感觉不对。

我觉得我错过了一些知识，因为无论我用谷歌搜索什么，都没有关于如何正确插入它的有用信息。你能将一个属性插入到这样的指令中吗？

提前致谢乙

Answer 1

我认为插值没有任何问题。但是，Angular 中的 document.getElementById(options.id) 看起来很脏。相反，您可以使用 template reference variable 并直接发送 HTMLElement。

试试下面的方法

模板

<div appSticker #sticker [Drag]="{ref:sticker}"></div>

指令

@Directive({ selector: "[appSticker]" })
export class StickerDirective {
  stickerElement: HTMLElement;

  @Input()
  set Drag(options: any) {
    this.stickerElement = options.ref;
  }

  constructor() {}
}

此外，我在您的代码中的 <div> 标记中也没有看到指令绑定。

角度指令输入的动态属性绑定

1 个答案: