将某些单词与组件包装在一个内容可编辑的 div 中

Question

我正在尝试替换来自 contenteditable div 的动态文本，通过正则表达式对单词进行排序并用角度组件包装它们。到目前为止，我已经找到了一种用组件标记替换该文本的方法，但我似乎无法使组件工作。相反，它只是将组件显示为空白。如何手动引导/启动这些动态添加的组件？app.component.html：<div #from_field (keyup)="textarea_keyup_event(from_field)" contenteditable="true">  This text can be edited by the user.  If the user writes the 'moo' word, it should be wrapped with "replacer" component.</div>app.component.ts：function getFormattedText(text) {    var parts = text.split(/(\bmoo+\b)/gi);    for (var i = 1; i < parts.length; i += 2) {      parts[i] = '<app-replacer key="'+ i + '">' + parts[i] + '</app-replacer>';    }    return parts.join('');}textarea_keyup_event(element) {  const preFormattedText = element.textContent;  element.innerHTML = getFormattedText(preFormattedText);}// if you write:// "I am a cow; cows say moo. MOOOOO."// it replaces the DOM with this:// "I am a cow; cows say <app-replacer key="1">moo</app-replacer>. <app-replacer key="3">MOOOOO</app-replacer>."// but the app-replacer tag doesn't fire up the component.

Answer 1

我会在 Web 组件的帮助下做到这一点。

Angular 有一个@angular/elements库，允许我们从 Angular 组件创建 Web 组件。

app.module.ts

import { createCustomElement } from '@angular/elements';

@NgModule({

  imports: [

    BrowserModule

  ],

  declarations: [

    AppComponent,

    ReplacerComponent

  ],

  entryComponents: [ReplacerComponent],

  bootstrap: [AppComponent]

})

export class AppModule {

  constructor(private injector: Injector) {

    if (!customElements.get('app-replacer')) {

      const btnComp = createCustomElement(ReplacerComponent, {

        injector: this.injector

      });

      customElements.define('app-replacer', btnComp);

    }

  }

}

一旦您将其定义ReplacerComponent为 Web 组件app-replacer，您的 contenteditable div 中的所有标签都将自动呈现为组件。