以角度导入和导出

如何解决以角度导入和导出

我正在开发一个包含几个组件的 angular 项目。有一个 const 对象正在 .ts 文件中导出，并且在两个组件中导入。

export const topology = {
  "topologyName": '',"hosts": [],"switches": [],"hostLinks": [],"switchLinks": []
}

在一个组件中更改导入对象的属性值似乎会更改另一个组件中导入的相同对象的属性。我验证了代码并且非常确定我不知道如何在组件之间传递数据。

我的问题是，在 .ts 文件中，上面同一个导出对象的两个导入，在两个组件中是指内存中的同一个对象还是独立的？
作为一个单独的问题；在其中一个组件中，我在 div 元素中使用了字符串插值，在该元素中我调用了一个方法，该方法必须在嵌入式编辑器 (ace) 中显示 .json 数据。
```
<div class="code-editor" #codeEditor>
   {{ displayCode() }}
</div>
```

这就是方法。（“拓扑”对象是导入到该组件和其他组件中的对象，正如我之前所说的）

 @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'));
 }

当我取消对 console.log 语句的注释时，它会在控制台中无限记录“再次调用”并且浏览器挂起。这是 angular 的行为方式吗？我们不应该在字符串插值中调用一个方法，因为它会被连续调用吗？还是我哪里错了？

你能澄清一下疑惑吗？非常感谢你。

解决方法

正如我上面写的：是的，如果您从一个文件中导出一个对象并将其导入到多个其他文件中，则所有导入都将引用同一个对象实例。

问候 <label for="#<%= turma.id %><%= turma.nome %>"></label> <input id="<%= turma.id %><%= turma.nome %>" value="<%= turma.nome %>">：您在组件的每个更改检测周期中通过直接从模板调用它来调用 displayCode()。同时，您很可能正在修改再次触发更改检测的组件部分：

displayCode()

这将导致无限循环。

通常，我建议不要在直接从模板调用的方法中执行任何数据更改。此外，通常完全不调用模板中的任何方法以避免类似问题，而是将显示值从生命周期钩子（onInit，...）存储到组件的属性并呈现它们，避免这样的循环通常是有意义的一个。