Question

我在其中一个组件中创建了一个动态组件，它是在html中制作的，我将其放置在（ng-template）中：

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

，然后根据所计算的数据在theis div中显示一个文本，它是带有html标签的字符串，如下所示：

数据我的名字叫foo
- 我触发了内容可编辑的div的模糊事件，我看到了更改，并基于此生成具有新跨度的新字符串，并将其再次呈现为相同的div
- 问题来了，当我从contenteditable div中删除了所有文本时，该组件已从dom中删除，即使我尝试再次在该字段中键入内容，也无法再次进行实例化，但是它只是在div中键入创建的组件

当用户从字段中删除所有文本并尝试再次键入时，如何解决此问题并生成组件？

这是该项目的一个闪电战： https://stackblitz.com/edit/angular-dynamic-stack?file=src%2Fapp%2Fapp.component.ts

Answer 1

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

角动态组件问题

1 个答案: