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

【问题标题】：Wrap certain words with a component in a contenteditable div in angular将某些单词与组件包装在一个内容可编辑的 div 中
【发布时间】：2020-07-08 09:06:20
【问题描述】：

我正在尝试替换来自 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.

【问题讨论】：

将<app-replacer />组件添加到DOM后会发生什么？

标签： javascript html angular string dom

【解决方案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 组件，您的contenteditable div 中的所有app-replacer 标记都会自动呈现为组件。

Ng-run Example

【讨论】：