使用 Ace 编辑器在 Angular 中获取子组件实例的原生元素时面临问题

Question

我正在尝试构建一个页面，其中并排放置两个 JSON 代码编辑器，可以显示两个不同的 JSON 代码片段，并且还可以根据需要使用 ACE 编辑器进行不同的配置（即单独的主题、设置、大小和错误）。

我现在已经完成了大部分工作。但是，我试图将相同的代码编辑器共享组件重新用作单个父组件中的两个子实例，我想将这两个实例显示为两个显示不同 JSON 值和其他参数的编辑器，这就是它不起作用的地方为我而出。

这是代码：

parent.component.html

<div class="projects">
    <!-- layer to display two editors side by side -->
    <div class="row no-margin">
        <div class="col">
            child editor 1
            <childComponent [template]="childTemplate1" jsonValue="{name:joe}" #childEditor1></childComponent>
        </div>
        <div class="col">
            child editor 2
            <childComponent [template]="childTemplate2" jsonValue="{name:bob}" #childEditor2></childComponent>
        </div>
    </div>
</div>

<ng-template #childTemplate1>
    <div class="app-ace-editor" #childEditor1 style="height: 80vh;"></div>
</ng-template>

<ng-template #childTemplate2>
    <div class="app-ace-editor" #childEditor2 style="height: 80vh;"></div>
</ng-template>

parent.component.ts

  @ViewChild('childEditor1') private childEditor1: ElementRef<HTMLElement>;
  @ViewChild('childEditor2') private childEditor2: ElementRef<HTMLElement>;
  @ViewChild(SharedCodeEditorChildComponent) private childEditor: SharedCodeEditorChild;

  constructor() { }

  ngOnInit(): void {
  }

  /* invoke ace editor's method based on the child editor instances */
  ngAfterViewInit(): void {
    this.childEditor.invokeEditor(this.childEditor1);
    this.childEditor.invokeEditor(this.childEditor2);
  }

sharedCodeEditorChild.component.html

<ng-container *ngTemplateOutlet="template"></ng-container>

sharedCodeEditorChild.component.ts

  @Input() template: TemplateRef<any>;
    
  constructor() { }

  ngAfterContentInit(): void {
  
  }

  ngOnInit(): void {
  
  }
  
  ngAfterViewInit(): void {
  
  }

  invokeEditor(elem:any) {
    ace.config.set("fontSize", this.fontSize + 'px');
    ace.config.set('basePath', 'https://unpkg.com/[email protected]/src-noconflict');
    this.aceEditor = ace.edit(elem.nativeElement); // this returns undefined and code further doesnt work
  }

我尝试过的

我从昨天晚上开始就在尝试用不同的方法在这里问这个问题，例如：

使用

ContentChildren

、

ViewContainerRef

、

ViewChildren

，甚至使用

createEmbeddedView(child.nativeElement)

动态设置模板参考。

尝试研究 chatGPT 和 stackoverflow，但不幸的是对我来说没有任何作用。

我想要什么

在

sharedCodeEditorChild.component.ts

中，我希望这一行

this.aceEditor = ace.edit(elem.nativeElement);

根据我调用的子实例正确返回子级的本机元素，以便两个编辑器都可以显示从父级传递的两个不同的 JSON 值，以及它们也可以使用单个

sharedCodeEditorChildComponent

单独配置。

如果您能引导我朝正确的方向前进，这将非常有帮助并挽救我的一天。谢谢你。

Answer 1

您的模板参考

#childEditor1

和

#childEditor2

在两个地方重复！删除它并尝试初始化

<div class="projects">
    <!-- layer to display two editors side by side -->
    <div class="row no-margin">
        <div class="col">
            child editor 1
            <childComponent [template]="childTemplate1" jsonValue="{name:joe}" #childEditor1></childComponent>
        </div>
        <div class="col">
            child editor 2
            <childComponent [template]="childTemplate2" jsonValue="{name:bob}" #childEditor2></childComponent>
        </div>
    </div>
</div>

<ng-template #childTemplate1>
    <div class="app-ace-editor" #codeEditor1 style="height: 80vh;"></div>
</ng-template>

<ng-template #childTemplate2>
    <div class="app-ace-editor" #codeEditor2 style="height: 80vh;"></div>
</ng-template>

parent.html

@ViewChild('childEditor1') private childEditor1: SharedCodeEditorChild;
@ViewChild('childEditor2') private childEditor2: SharedCodeEditorChild;

@ViewChild('codeEditor1') private codeEditor1: ElementRef<HTMLElement>;
@ViewChild('codeEditor2') private codeEditor2: ElementRef<HTMLElement>;

  constructor() { }

  ngOnInit(): void {
  }

  /* invoke ace editor's method based on the child editor instances */
  ngAfterViewInit(): void {
    this.childEditor1.invokeEditor(this.codeEditor1);
    this.childEditor2.invokeEditor(this.codeEditor2);
  }