时间戳

首页 > 解决方案 > 如何在角度中使用指令添加组件

angular - 如何在角度中使用指令添加组件

问题描述

我正在尝试在输入（或文本区域）元素中添加代码完成。类似于您将在现代 IDE 中看到的内容。

我已经有一个指令来寻找一些键盘快捷键来在我的输入元素中添加一些变量分隔符：

@Directive({
  selector: '[askGenerateVariable]'
})
export class GenerateVariableDirective {

  constructor(private element: ElementRef) { }

  @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {

    if (e.ctrlKey && (e.key === '1' || e.key === '2' || e.key === '3' || e.key === '4')) {
      ...
    }
  }

}

但现在我希望它添加另一个组件（在框中显示项目列表的组件）。

有没有办法做到这一点？我尝试将其作为组件并添加模板，但模板的内容没有显示在任何地方。可能是因为输入没有结束标签。

我有对元素的引用。我知道我可以向其中添加东西，但是如何添加另一个组件？

谢谢

标签： angular

解决方案

默认方法是将输入包装到组件中。因此，您可以简单地修改 DOM 并控制输入发生的任何事情。

保持你的方式，你可以尝试使用 css 的力量（见https://www.w3schools.com/howto/howto_css_dropdown.asp和https://css-tricks.com/css-attr-function-got-nothin-自定义属性/了解详细信息）。但是这种方法非常有限，所以我什至不会尝试。

我不建议从指令中进行任何 DOM 操作，因为它不是它的设计目的。

要查看如何将输入包装到具有自动完成功能的组件，您可以在此处查看材料团队是如何做到的https://github.com/angular/material2/tree/master/src/lib/autocomplete

推荐阅读