Я делаю динамический компонент в одном из моих компонентов, и это было сделано, и вот оно в HTML, я помещаю его в (ng-шаблон):
<div type="text" class="form-control" contenteditable="true" name="phrase" (input)="triggerChange($event)">
<ng-container #container></ng-container>
</div>
Код triggerChange:
triggerChange(event) {
let newText = event.target.innerText;
this.updateLineAndParentLineAndCreateComponent(newText);
}
Что заставило функцию сказать буквально обновить строку с новым текстом и обновить родительский компонент с этими изменениями, а также сделать компонент на лету
Код для создания компонента:
compileTemplate(line: any) {
// console.log(line[4]);
let metadata = {
selector: `runtime-component-sample`,
template: line[4]
};
let factory = this.createComponentFactorySync(this.compiler, metadata);
if (this.componentRef) {
this.componentRef.destroy();
this.componentRef = null;
}
this.componentRef = this.container.createComponent(factory);
let instance = <DynamicComponent>this.componentRef.instance;
instance.line = line;
instance.selectPhrase.subscribe(this.selectPhrase.bind(this));
}
private createComponentFactorySync(compiler: Compiler, metadata: Component, componentClass?: any): ComponentFactory<any> {
let cmpClass;
let decoratedCmp;
if (componentClass) {
cmpClass = componentClass;
decoratedCmp = Component(metadata)(cmpClass);
} else {
@Component(metadata)
class RuntimeComponent {
@Input() line: any;
@Output() selectPhrase: EventEmitter<any> = new EventEmitter<any>();
showEntities(lineIndex, entityIndex) {
this.selectPhrase.emit(entityIndex);
}
};
decoratedCmp = RuntimeComponent;
}
@NgModule({ imports: [CommonModule], declarations: [decoratedCmp] })
class RuntimeComponentModule { }
let module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
return module.componentFactories.find(f => f.componentType === decoratedCmp);
}
, и я отображаю текст внутри этого div на основе данных, которые я вычисляю, и это строка с HTML-тегами, подобными этой:
Данные Меня зовут foo
Я запускаю событие размытия div, которое является contenteditable, и я вижу изменения, и на основе этого я генерирую новую строку с новыми интервалами и отображаю ее сноватот же div
проблема возникает, когда я удаляю весь текст из contenteditable div, компонент удален из dom и не может быть повторно восстановлен, даже если я пытаюсь ввести снова в полено просто введите внутри div, а не созданный компонент
, как я могу решить эту проблему и может сгенерировать компонент, когда пользователь удаляет весь текст из поля и пытаетсянабрать снова?
Вот стекаблитц для проекта: https://stackblitz.com/edit/angular-dynamic-stack?file=src%2Fapp%2Fapp.component.ts