动态组件未正确绑定

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>

打字稿：

@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。