我有一个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>
答案 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
的更多信息,不同策略的优缺点。