无法在Angular中实例化编辑器

Question

我正在尝试构建一个代码编辑器

我有有条件渲染的组件

 <ace-editor [(text)]="text" #editor style="height:150px;"></ace-editor>

我有一个ngAfterViewInit生命周期钩子，我在其中设置了所有的编辑器选项。

ngAfterViewInit() {
console.log('After view init called...');
this.editor.setTheme('monokai');
this.editor.setMode('text');
this.editor.getEditor().setShowPrintMargin(false);
this.editor.getEditor().setFontSize(16);
// this.editor.setReadOnly(true);
this.editor.getEditor().setOptions({
  // enableBasicAutocompletion: true,
});

this.editor.getEditor().commands.addCommand({
  name: 'showOtherCompletions',
  bindKey: 'Ctrl-.',
  exec: function (editor) {},
});

}

我使用.ts文件中的@ViewChild通过模板引用变量访问编辑器。但在浏览器中，我无法读取未定义的属性setTheme。

Answer 1

我猜它与.ts文件中的@ViewChild的Metadata Properties有关。

你可以在这里找到它们https://angular.io/api/core/ViewChild

在这种情况下，您可以更改ViewChild的静态属性。如下所示：

 @ViewChild('viewMe', { static: true })

如果你发布更多关于.ts文件的信息，就会更容易知道发生了什么。

更新：

根据评论:这个错误的原因是在ngAfterViewInit内部，您的<ace-editor #editor></<ace-editor>没有准备好，所以this.editor没有定义。您应该在呈现<ace-editor #editor></<ace-editor>时更改逻辑或调用所有this.editor.XXX。