通过窗口访问Angular2应用程序会失去"这个"

时间:2016-11-01 15:22:17

标签: javascript angular typescript angularjs-scope this

我有一个Angular2应用程序,我已经公开了在ng2之外运行的代码的某些方法。问题是当在ng2和内部之外调用时,this不一样。

https://plnkr.co/edit/KZeH1ArvuMTmsBCFjNnY (看控制台看看发生了什么)

在我的应用程序组件中,它将名称设置为" Angular2"负载。我有doSomething方法执行简单的this.name = "modified angular2 app。当我通过window.myVar.doSomething()调用它时,this的范围不是我的类,它是我暴露的对象。如何访问name。我在构造函数中尝试了self = this并且正在执行self.name =,但是当我捆绑并缩小生产时,它会失败。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;

  constructor() {
    this.name = 'Angular2'
  }

  doSomething(){
    this.name = "modified angular2 app" 
  }

  ngOnInit() {

    window.myVar = {doSomething:this.doSomething}

  }

}

在我的index.html我添加了一个代码段来调用我的doSomething方法。

<body>
    <my-app>
    loading...
  </my-app>
  <script>
    function checkReady() {
      if (window.myVar) {
        console.log("Ready")
        console.log(myVar)
        myVar.doSomething();
      } else {
        setTimeout(function() {
          console.log("Not ready")
          checkReady()
        }, 500)
      }
    }
    checkReady()
  </script>
  </body>

2 个答案:

答案 0 :(得分:2)

您需要bind()您的上下文功能。这样,无论它在何处被调用,它都可以访问声明它的局部变量。

window.myVar = { doSomething: this.doSomething.bind(this) };

答案 1 :(得分:0)

TypeScript具有fat-arrow语法,您可以使用它自动将this绑定到类实例:

export class App
{
  //...
  doSomething = () => {
    this.name = "modified angular2 app" 
  }
  //...
}

请注意,此语法导致函数doSomething不再是App原型的一部分。

有关{script} / javascript here this的更多信息,不同策略的优缺点。