角动态组件问题

时间:2018-10-14 16:55:10

标签: javascript angular

我在其中一个组件中创建了一个动态组件,它是在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

1 个答案:

答案 0 :(得分:0)

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