动态组件未正确绑定

Question

在我们的Angular 2应用程序中，我们使用了Kendo的Combobox组件。此组件包装在运行时动态创建的组件中。创建的代码非常简单：

let factory = this.resolver
        .resolveComponentFactory(ComboboxComponent);

nextTo.createComponent(factory);

nextTo变量表示Angular创建组件的位置。

@ViewChild('container', { read: ViewContainerRef })
container: ViewContainerRef;

container变量代表HTML模板中的div。

NB ：组件是在ngAfterViewInit事件期间创建的。创建过程中不会抛出任何错误。

Kendo组件已正确实例化和初始化，但是当我们在创建后影响数据时，组件似乎无法识别绑定，并且什么也不做。有什么想法吗？

组件的HTML：

<kendo-combobox [data]="listItems"></kendo-combobox>

TypeScript：

@Component({
    templateUrl: `combobox.component.html`,
    selector: 'combobox',
    styleUrls: [
        'combobox.component.css'
    ]
})
export class ComboboxComponent extends FieldComponent {
    public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
}

NB2： FieldComponent是我们用于所有组件的全局操作的抽象类。

EDIT1 ：我终于找到了问题所在，但我无法说出错误。当我检查DOM时，我可以看到隐藏了<div role='combobox'>，这是包含所有数据的组合框。那么为什么我第二个组合框显示没有数据呢？

Answer 1

我怀疑在这种情况下不会触发组件的更改检测。 createComponent返回ComponentRef，其中包含与该组件关联的更改检测器。创建动态组件后，您可以尝试调用 ChangeDetectorRef 的detectChanges()。

Answer 2

我发现了导致这种奇怪行为的原因。由于项目的第一个开始，我们使用Kendo JQuery作为组件，我们使用kendo.all.js。我真的不知道为什么，但似乎kendo.all.js干扰了新Angular组件的kendo-combobox HTML模板，它注入了一些引起奇怪行为的节日HTML。