Currently, I am working on a complex Angular project that consists of multiple components. One specific scenario involves an exported `const` object in a .ts file which is then imported into two separate components.
export const topology = {
"topologyName": '',
"hosts": [],
"switches": [],
"hostLinks": [],
"switchLinks": []
}
An interesting observation has been made where modifying the properties of this imported object in one component seems to have an impact on the same object's properties in another component. Upon thorough code review, it appears that this behavior is not due to data passing between the components.
My primary question revolves around whether the two separate imports of the same exported object from a .ts file actually reference the same object in memory or function independently?
In addition, within one of the components, I have utilized string interpolation inside a
divelement triggering a method call intended to display .json data in an embedded editor (Ace).<div class="code-editor" #codeEditor> {{ displayCode() }} </div>
The following snippet showcases the method being referenced. (Note that the 'topology' object was previously imported into this particular component as well as others)
@ViewChild('codeEditor', {static:true}) codeEditorElmRef: ElementRef;
private codeEditor: ace.Ace.Editor;
displayCode() {
// console.log('Called again');
const element = this.codeEditorElmRef.nativeElement;
const editorOptions: Partial<ace.Ace.EditorOptions> = {
readOnly: true,
autoScrollEditorIntoView: true,
showPrintMargin: false,
highlightActiveLine: false,
highlightGutterLine: false,
cursorStyle: "slim",
minLines: 37,
maxLines: 37,
};
topology.hosts.sort();
topology.switches.sort();
topology.hostLinks.sort();
topology.switchLinks.sort();
this.codeEditor = ace.edit(element, editorOptions);
this.codeEditor.setTheme(THEME);
this.codeEditor.getSession().setMode(LANG);
this.codeEditor.setShowFoldWidgets(true);
this.codeEditor.setAutoScrollEditorIntoView( true );
this.codeEditor.getSession().setValue(JSON.stringify(topology, null, '\t'));
}
Upon uncommenting the console.log statement, an infinite loop occurs resulting in browser hang-ups. Is this typical behavior within Angular? Should methods not be called within string interpolations due to continuous execution? Or could there potentially be an error in my implementation?
Your clarification on these matters would be greatly appreciated. Thank you for your assistance.