javascript - 将某些单词与组件包装在一个内容可编辑的 div 中
问题描述
我正在尝试替换来自 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.
解决方案
我会在 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 中的所有标签都将自动呈现为组件。
推荐阅读
- google-chrome-extension - 从 Office 365 管理中心在最终用户 Windows 设备中安装 chrome 扩展
- java - 如何更改按钮的颜色?
- javascript - items.remove 如果获取响应是 {artists: null}
- java - java: 带有 Jackon ObjectMapper 的 super.clone()
- javascript - 有没有办法在 MUI 中创建“真正的”自定义组件?
- powerbi - Power BI 中的用户/用户组特定背景或壁纸
- java - spring-ws如何暴露多个版本的服务服务名
- c# - 在项目中包含外部源代码进行调试
- excel - Power Query 中的表组合
- python - 想输入txt文件而不是singlge输入值