Question

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

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但是click事件没有在模板中触发。

因此在angular2中有解决方案。

Answer 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>';
}

Answer 2

你可以包含jquery之类的内容，但不建议你是否打算在视图中修改内容。

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

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

jQuery append（），prepend（），html（）等效于角度2

2 个答案: