import { Component,OnInit} from ''@angular/core'';
declare var $:any;
@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html'',
  styleUrls: [''./app.component.css'']
})
export class AppComponent  implements OnInit{
  ngOnInit()
  {
    $("#title").html("<p>this is a string from jQuery html setting</p>");
  }
}

<div id="title">
</div>

ngOnInit()
  {
    $(".card").faceCursor({}); 
    $("#title").html("<p>this is a string from jQuery html setting</p>");
  }

我有一个组件设置。当模板中的某个元素被点击时，我想添加一个监听器mousemove到同一个模板的另一个元素。然后我想删除这个监听器，当第三个元素被点击。

我有种工作只是使用普通的Javascript来抓取元素，然后调用标准的addEventListener()，但我想知道是否有一个更多的“Angular2.0”的方式，我应该研究。

干杯任何建议:)

例如，如果要向组件添加一个单击事件，则必须使用Renderer和ElementRef(这也为您提供了使用ViewChild或检索nativeElement的任何选项)

constructor(elementRef: ElementRef,renderer: Renderer) {

    // Listen to click events in the component
    renderer.listen(elementRef.nativeElement,'click',(event) => {
      // Do something with 'event'
    })
);

你可以使用listenGlobal，让你访问文档，正文等。

renderer.listenGlobal('document',(event) => {
  // Do something with 'event'
});

注意，因为beta.2都listen和listenGlobal返回一个函数来删除侦听器(见beta001的changelog中的breaking changes部分)。这是为了避免大型应用程序中的内存泄漏(参见#6686)。

所以要删除我们动态添加的侦听器，我们必须将listen或listenGlobal赋值给一个将保存函数的变量，然后执行它。

// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;

// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;

constructor(elementRef: ElementRef,renderer: Renderer) {

    // We cache the function "listen" returns
    this.listenFunc = renderer.listen(elementRef.nativeElement,(event) => {
        // Do something with 'event'
    });

    // We cache the function "listenGlobal" returns
    this.globalListenFunc = renderer.listenGlobal('document',(event) => {
        // Do something with 'event'
    });
}

ngOnDestroy() {
    // We execute both functions to remove the respectives listeners

    // Removes "listen" listener
    this.listenFunc();

    // Removs "listenGlobal" listener
    this.globalListenFunc();
}

这里有一个例子工作的plnkr。该示例包含listen和listenGlobal的用法。

更新

plnkr更新到beta.12和我改进的答案和plnkr，以更清楚如何删除侦听器。

例如，在Angular 1中，我可以动态编译一个HTML的片段并将其附加到DOM：

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);

Angular2没有任何$compile等效。你可以使用DynamicComoponentLoader和hack with ES6类来动态编译你的代码(见plunk)：

import {Component,DynamicComponentLoader,ElementRef,OnInit} from 'angular2/core'

function compiletoComponent(template,directives) {
  @Component({ 
    selector: 'fake',template,directives
  })
  class FakeComponent {};
  return FakeComponent;
}

@Component({
  selector: 'hello',template: '<h1>Hello,Angular!</h1>'
})
class Hello {}

@Component({
  selector: 'my-app',template: '<div #container></div>',})
export class App implements OnInit {
  constructor(
    private loader: DynamicComponentLoader,private elementRef: ElementRef,) {}

  ngOnInit() {} {
    const someDynamicHtml = `<hello></hello><h2>${Date.Now()}</h2>`;

    this.loader.loadIntoLocation(
      compiletoComponent(someDynamicHtml,[Hello])
      this.elementRef,'container'
    );
  }
}

但它只会工作，直到html解析器里面的angular2核心。

EXCEPTION：ReferenceError：angular未定义

更新：

使用TypeScript 2.1，ES6简写对象扩展符号可用：

const copy = { ...original }