动态组件未正确绑定

时间:2017-02-02 12:59:55

标签: javascript angular kendo-ui-angular2

在我们的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'>,这是包含所有数据的组合框。那么为什么我第二个组合框显示没有数据呢?

enter image description here

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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