如何使用angular中的指令添加组件

Question

我正在尝试在输入（或textarea）元素中添加代码完成。类似于现代IDE中的内容。

我已经有了一条指令，该指令寻找一些键盘快捷键以在我的输入元素中添加一些变量定界符：

context.clearRect(0, 0, context.canvas.width, context.canvas.height);

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

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

我对该元素有参考。我知道我可以添加一些东西，但是如何添加其他组件？

谢谢

Answer 1

默认方法是将输入包装到组件中。因此，您只需修改DOM并控制输入中发生的一切。

按照自己的方式操作，可以尝试使用css的功能（有关详细信息，请参见https://www.w3schools.com/howto/howto_css_dropdown.asp和https://css-tricks.com/css-attr-function-got-nothin-custom-properties/）。但是这种方法非常有限，因此我什至不会尝试。

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

要查看如何将输入包装到具有自动完成功能的组件，可以在这里https://github.com/angular/material2/tree/master/src/lib/autocomplete

检查材料团队的工作方式。

Answer 2

@Roman答案向我指出了解决问题的简便方法：

我需要两个部分：

1. 带有模板的组件，用于显示我的自动完成项目列表
2. 将在输入（或texarea）上使用的指令来“触发”自动完成的显示

该组件仅在页面上添加一次。任何地方。 该指令可用于我要自动完成的所有输入字段。

此处的窍门是为指令提供组件的引用。然后，该指令可以调用方法或更改组件上的属性。

<ask-code-autocomplete #AskAutoComplete></ask-code-autocomplete>
<input [askVariableAutoComplete]="AskAutoComplete">

在指令中，您需要添加输入：

@Input('askVariableAutoComplete') codeAutocompleteComponent: AsCodeAutocompleteComponent;

现在在指令中，您可以使用它来执行以下操作：

this.codeAutocompleteComponent.show(newTop, newLeft);