Angular 指令输入的动态属性绑定

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>

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

我觉得我缺少一些知识，因为无论我 google 什么都没有关于如何正确插入它的有用信息。你能像这样将属性插入到指令中吗？

提前致谢 B

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> 标记中没有看到指令绑定。

Angular 指令输入的动态属性绑定

Dynamic Property Binding for Angular Directive Inputs

javascript

angular

angular-directive

directive

Angular 指令输入的动态 属性 绑定

Dynamic Property Binding for Angular Directive Inputs

javascript

angular

angular-directive

directive

Angular 指令输入的动态属性绑定