angular 的进出口

Question

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

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

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

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

这就是方法。（'topology' 对象是导入到此组件和其他组件中的对象，正如我之前所说）

 @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 语句时，它会在控制台中无限记录 'Called again' 并且浏览器挂起。这是 angular 的行为方式吗？我们不应该在字符串插值中调用一个方法，因为它会被连续调用吗？还是我哪里错了？

能否解惑一下？非常感谢你。

Answer 1

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

问候 displayCode()：您在组件的每个变更检测周期中通过直接从模板调用它来调用 displayCode()。同时，您很可能正在修改再次触发变更检测的组件部分：

this.codeEditor = ace.edit(element, editorOptions);

这将导致死循环。

一般来说，我建议不要在直接从模板调用的方法中执行任何数据更改。此外，通常根本不从模板调用任何方法以避免此类问题，而是将显示值从生命周期挂钩（onInit，...）存储到组件的属性并渲染它们，避免这样的循环一.

angular 的进出口

Imports and exports in angular

javascript

angular

typescript

string-interpolation

javascript-import