angular - Rete.js 在调整窗口大小之前不会渲染编辑器

Question

我正在使用Angular 7.1.4和"rete": "^1.4.4"。如果我在组件中使用编辑器，它会呈现正常，但如果将编辑器作为子组件传递给具有 ng-content 的另一个组件，它不会在编辑器中呈现节点，直到调整窗口大小。作为一种解决方法，我尝试在 ngOnInit 中触发窗口调整大小：

setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        });

它渲染节点但不渲染连接线

Answer 1

如果您查看 rete https://codepen.io/Ni55aN/pen/xzgQYq附带的示例，您会发现您也可以通过在 NodeEditor 设置结束时调用手动调整大小和处理来解决问题：

let editor = new NodeEditor("rivetNodeEditor@0.1.0", container)
... //Setting up node components
editor.view.resize()
editor.trigger('process')

Answer 2

找到了修复。我在 ngAfterViewInit 中初始化容器，发现并非所有样式属性都在 ngAfterViewInit 事件之后附加。所以解决方法是设置超时

setTimeout(() => { const container = this.el.nativeElement; let editor = new NodeEditor("rivetNodeEditor@0.1.0", container); ... }, 10);