My Angular2 app has exposed certain methods to code running outside of ng2. However, the issue arises when calling these methods outside of ng2 as the context of this is different compared to when called inside.
Take a look at this link to see what exactly is happening in the console.
Initially, my app component sets the name to "Angular2" upon loading. I have a method called doSomething, which simply changes the name to "modified angular2 app". When I try to call this method using window.myVar.doSomething(), the scope of this becomes the object I exposed instead of my class. How can I access the name property? I attempted using self = this in the constructor and then changing self.name, which worked but failed during bundling and minification for production.
@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}
}
}
In my index.html, I added a snippet to call my doSomething method.
<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>