Angular Dynamic Component Issue

Question

I make a dynamic component in one of my components and it was made and here it's in the html I place it in the (ng-template) :

<div type="text" class="form-control" contenteditable="true" name="phrase" (input)="triggerChange($event)">
          <ng-container #container></ng-container>
      </div>

Code of triggerChange :

  triggerChange(event) {
    let newText = event.target.innerText;
    this.updateLineAndParentLineAndCreateComponent(newText);
  }

Which made what the function says literally update the line with the new text and update the parent component with this changes and also make the on the fly component

Code for create Component :

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);
  }

• and I display a text inside theis div based on the data I calculate and it's a string with html tags like that:

  Data My name is foo

  • I trigger the blur event of the div that is contenteditable and I see the changes and based on that I generate a new string with new spans and render it again the same div

  • the problem comes when I delete all the text from the contenteditable div the component removed from the dom and can't be reinstantiated again even if I try to type again in the field but it just type inside the div not the created component

how I can solve this problem and can generate the component when the user delete all text from field and try to type again ?

Here is a stackblitz for the project : https://stackblitz.com/edit/angular-dynamic-stack?file=src%2Fapp%2Fapp.component.ts

Answer 1

我发现解决方案是通过处理contenteditable div中的击键，尤其是DEL和BackSpace击键，因此，当输入为空并且击键是其中之一时，您只需创建一个新组件即可，但是仍然存在以下问题：动态组件不会出现动态组件它是空的或只有标签，但这是我直到现在才想到的解决方法