Question

我正在尝试创建一个应用程序，其中输入字段会动态添加到我的页面。

为此，我目前使用以下代码（简化）：

Html：

<div #content></div>

角：

public class MyPage implements AfterViewInit {
   @ViewChild('content') contentElement: ElementRef;

   content: HtmlElement;

   constructor() {}

   ngAfterViewInit() {
     this.content = this.contentElement.nativeElement;
   }

   addInput() {
     this.content.insertAdjacentHTML('beforeend', '<input type="text"/>');
   }

   processInput(event) {
      alert(event.target.value);
   }
}

但现在我想做这样的事情：

   addInput() {
     this.content.insertAdjacentHTML('beforeend', `<input (keyup.enter)="processInput($event)" type="text"/>`);
   }

使用( )绑定。

但这只是在我检查页面时显示：

当输入普通的html文件时：

<input type="text"/>
从我的代码中注入时：

<input type="text (keyup.enter)="processInput($event)"/>

我该如何使这项工作？我已经尝试了一种解决方法来创建一个不同的组件并处理processInput，然后只使用selector。但这完全相同，只是将组件的选择器名称放在DOM中，而不是实际的组件。

TL;博士

想象一下，我想添加一个输入字段，其中enter命令监听processInput，而不是那么难。但现在我想从我的角度代码插入这些输入字段。

将基于角色的内容（例如[]，()添加到HTML中不起作用/不会被编译

使用Angular 2绑定将组件添加到HTML

0 个答案: