Recently, I've started working with Angular and TypeScript. I am facing an issue where I need to access a local variable that is declared in the ngOnInit function from outside it, but I'm not quite sure how to achieve this correctly. This variable is defined in a component called BlocklyComponent.
export class BlocklyComponent implements OnInit {
primaryWorkspace: Blockly.WorkspaceSvg;
constructor(private sanitizer: DomSanitizer) {
this.updateXML = this.updateXML.bind(this);
}
ngOnInit() {
var primaryWorkspace = Blockly.inject('primaryDiv',{....} as Blockly.BlocklyOptions);
While I can see the object inside the ngOnInit function without any issues, the problem arises when I try to access the local variable from a new function outside of ngOnInit, specifically when adding a changeListener.
primaryWorkspace.addChangeListener(this.updateXML); //addChangeListener is specific to the Blockly library
}
updateXML(primaryEvent) {
if (primaryEvent.isUiEvent) {
return; //Do not clone UI events
};
var xml = Blockly.Xml.workspaceToDom(primaryWorkspace); //Converting workspace into XML using Blockly library
console.log(xml);
}
I have attempted to use 'this.primaryWorkspace' in the method call, however, it refers to the property rather than the local variable. Although creating the function inside ngOnInit solves the issue, I require updateXML to be declared outside.
Any help on resolving this matter would be greatly appreciated. Thank you.