jQuery append(), prepend(), html() 等效于 Angular 2答案

【问题标题】：jQuery append(), prepend(), html() equivalent in angular 2jQuery append(), prepend(), html() 等效于 Angular 2
【发布时间】：2016-08-04 11:13:35
【问题描述】：

我正在创建一个元素如下：

let tmplt=``;
      for(let i=0;i<wht.length;i++){
        tmplt +=`<li title="${wht[i]}" style="color:#000">
          <span (click)="slctRmv($event)">×</span>${wht[i]}
          </li>`;
      }
      jQuery("#myId").prepend(tmplt);

它附加到 myId 但点击事件没有像模板中那样触发。

那么在 angular2 中是否有解决方案。

【问题讨论】：

let 语法是什么？
@madalinivascu ES6 语法

标签： jquery typescript angular ecmascript-6

【解决方案1】：

Angular2 中应该避免直接的 DOM 操作。

您可以获得对锚元素的引用，例如

@Component({
  selector: '...',
  template: `<div><span #myAnchor></span></div>`})
class MyComponent {
  @ViewChildren('myAnchor') myAnchor;

  constuctor(private renderer:Renderer) {}

  ngAfterViewInit() {
    // this.myAnchor.nativeElement.appendChild();
    this.renderer.invokeElementMethod(this.myAnchor, 'appendChild', []);
  }
}

或 HTML 元素提供的其他方法见 [Node.appendChild()](https://developer.mozilla.org/de/docs/Web/API/Node/appendChild

但更喜欢Renderer 提供的方法。

你也可以使用

<div><span [innerHTML]="someField"></div>

与

class MyComponent {
  someField:string = '<div>xxx</div>';
}

【讨论】：

#myId 是动态创建的，所以我最初的视图中没有#myId
(click)="slctRmv($event)" 或任何其他类型的 Angular 绑定语法在动态添加的 HTML 中不起作用。组件或指令也没有实例化。你可能想要DynamicComponentLoader
是的，我也怀疑是这样，但是如何在我的场景中使用它？
你的方案是什么？这可能对你有用stackoverflow.com/questions/36325212/…

【解决方案2】：

您可以包含 jquery 之类的内容，但如果您打算修改视图中的内容，则不建议这样做。

您也可以构建一个精简版https://www.npmjs.com/package/jquery-lite。

一个真正的用例可能是一个返回一些 html 的外部库，您需要在内部对返回的 html 进行一些 DOM 操作并将其发送到另一个服务。为此编写 vanilla JS 可能非常耗时。

【讨论】：