0

我正在做一个有几个组件的角度项目。在 .ts 文件中导出了一个const对象，并且在两个组件中导入了该对象。

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

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

  1. 我的问题是 .ts 文件中上述相同导出对象的两个导入在两个组件中是指内存中的同一个对象还是独立的？

  2. 作为一个单独的问题；在其中一个组件中，我在一个元素中使用了字符串插值，在该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 语句时，它会在控制台中无限记录“再次调用”并且浏览器挂起。这是角度的行为吗？我们不应该在字符串插值中调用一个方法，因为它会被连续调用吗？还是我在某个地方错了？

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

4

1 回答 1

0

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

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

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

这将导致无限循环。

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

于 2021-06-24T19:36:05.357 回答