使用语义UI和Angular2动态创建模态窗口 - DOM错误

Question

我遇到了Angular2与语义UI框架相结合的问题。我试图创建一个动态创建的子视图来显示模态窗口。 当我的模态模板使用语义UI时，会出现问题; Angular已知的DOM元素突然消失。

目前我有一个父ts组件：

export class TableComponent implements onInit, OnDestroy, AfterViewInit {
...
@ViewChild('TestModal', { read: ViewContainerRef }) testModal: ViewContainerRef;
...
    if(this.componentRef) {
        this.componentRef.destroy();
    }
    let factory = this.componentFactoryResolver.resolveComponentFactory(testModalComponent);
    this.componentRef = this.testModal.createComponent(factory);
...
}

以及其中包括的模板：

<div #CompetitorModalComponent></div>

在模态组件中，一切正常，如果我只使用段落标签等，但每当我想使用语义模态时

<div class="ui long first coupled modal fullscreen" id="testModal"></div>

DOM元素不再像＆＃34; app-test-modal＆＃34;但是它出现在一个div中，Angular无法控制/ Angular DOM元素消失了。

我的问题是，我不能再使用.destroy（）方法删除子组件，这通常不会成为问题。任何建议如何解决这个问题，所以我实际上可以动态删除生成的组件（无需手动操作DOM），

谢谢！