Angular复用Ace Editor子组件时获取原生元素失败的问题

核心问题 #

你当前的实现存在三个关键错误：

1. 子组件实例获取错误：父组件中@ViewChild(SharedCodeEditorChildComponent)只会获取第一个子组件实例，调用invokeEditor时只会操作第一个编辑器，第二个实例完全未被处理。
2. 元素引用穿透失败：父组件的@ViewChild('childEditor1')获取的是子组件实例本身，而非模板中渲染的<div>元素——因为模板是在子组件内部通过*ngTemplateOutlet渲染的，父组件无法直接穿透到子组件内部的DOM元素。
3. 组件封装性缺失：依赖父组件传递DOM元素初始化编辑器，违背了组件自主管理内部状态的原则，导致复用逻辑混乱。

解决方案：让子组件自主管理编辑器 #

最简洁且符合Angular组件设计规范的方案是让子组件自己封装编辑器容器，父组件仅传递配置参数和JSON内容。

1. 重构子组件（SharedCodeEditorChildComponent）

模板（sharedCodeEditorChild.component.html）：

<div class="app-ace-editor" #editorContainer [style.height]="height"></div>

逻辑代码（sharedCodeEditorChild.component.ts）：

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

declare var ace: any;

@Component({
  selector: 'childComponent',
  templateUrl: './sharedCodeEditorChild.component.html'
})
export class SharedCodeEditorChildComponent implements AfterViewInit {
  @Input() jsonValue: string;
  @Input() fontSize: number = 14;
  @Input() height: string = '80vh';
  @Input() theme: string = 'ace/theme/github';
  @ViewChild('editorContainer') private editorContainer: ElementRef<HTMLElement>;
  public aceEditor: any;

  ngAfterViewInit(): void {
    this.initAceEditor();
  }

  private initAceEditor(): void {
    if (!this.editorContainer?.nativeElement) return;

    // 基础配置
    ace.config.set("fontSize", `${this.fontSize}px`);
    ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');

    // 初始化编辑器
    this.aceEditor = ace.edit(this.editorContainer.nativeElement);
    this.aceEditor.getSession().setMode('ace/mode/json');
    this.aceEditor.setTheme(this.theme);
    this.aceEditor.setValue(this.jsonValue);
    this.aceEditor.clearSelection();
  }

  // 对外暴露的操作方法（按需添加）
  updateJsonValue(value: string): void {
    this.aceEditor.setValue(value);
    this.aceEditor.clearSelection();
  }

  getCurrentValue(): string {
    return this.aceEditor.getValue();
  }
}

2. 父组件简化调用

模板（parent.component.html）：

<div class="projects">
    <div class="row no-margin">
        <div class="col">
            <childComponent 
                [jsonValue]="'{\"name\":\"joe\"}'" 
                [fontSize]="14" 
                [theme]="'ace/theme/monokai'"
                #childEditor1>
            </childComponent>
        </div>
        <div class="col">
            <childComponent 
                [jsonValue]="'{\"name\":\"bob\"}'" 
                [fontSize]="16" 
                [theme]="'ace/theme/tomorrow'"
                #childEditor2>
            </childComponent>
        </div>
    </div>
</div>

逻辑代码（parent.component.ts）：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { SharedCodeEditorChildComponent } from './sharedCodeEditorChild.component';

@Component({
  selector: 'parentComponent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChildren(SharedCodeEditorChildComponent) private childEditors: QueryList<SharedCodeEditorChildComponent>;

  ngAfterViewInit(): void {
    // 如需对编辑器进行额外全局操作，可遍历实例
    this.childEditors.forEach((editor, index) => {
      // 示例：给第一个编辑器设置只读
      if (index === 0) {
        editor.aceEditor.setReadOnly(true);
      }
    });
  }
}

备选方案：保留模板传递（内容投影） #

如果必须通过父组件自定义编辑器容器结构，可使用Angular内容投影+@ContentChild获取DOM元素：

子组件修改

import { Component, Input, ContentChild, ElementRef, AfterViewInit } from '@angular/core';

declare var ace: any;

@Component({
  selector: 'childComponent',
  template: `<ng-content></ng-content>`
})
export class SharedCodeEditorChildComponent implements AfterViewInit {
  @Input() jsonValue: string;
  @Input() fontSize: number = 14;
  @ContentChild('editorContainer', { static: false }) private editorContainer: ElementRef<HTMLElement>;
  public aceEditor: any;

  ngAfterViewInit(): void {
    this.initAceEditor();
  }

  private initAceEditor(): void {
    if (!this.editorContainer?.nativeElement) return;

    // 初始化逻辑同前
    ace.config.set("fontSize", `${this.fontSize}px`);
    ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');
    this.aceEditor = ace.edit(this.editorContainer.nativeElement);
    this.aceEditor.getSession().setMode('ace/mode/json');
    this.aceEditor.setValue(this.jsonValue);
  }
}

父组件调用

<div class="projects">
    <div class="row no-margin">
        <div class="col">
            <childComponent [jsonValue]="'{\"name\":\"joe\"}'">
              <div class="app-ace-editor" #editorContainer style="height: 80vh; border: 1px solid #ccc;"></div>
            </childComponent>
        </div>
        <div class="col">
            <childComponent [jsonValue]="'{\"name\":\"bob\"}'">
              <div class="app-ace-editor" #editorContainer style="height: 80vh; background: #f5f5f5;"></div>
            </childComponent>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Radheya