動的コンポーネントが正しく結合されない

Question

Angular 2アプリケーションでは、剣道のComboboxコンポーネントを使用します。このコンポーネントは、ランタイム中に動的に作成されたコンポーネントにラップされます。作成のコードは非常に簡単である：角度がコンポーネントを作成しなければならない場合

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

nextTo.createComponent(factory); 

nextTo

変数を表します。

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

container変数は、HTMLテンプレートでdivを表します。

NB：コンポーネントはngAfterViewInitイベント中に作成されます。作成中にエラーはスローされません。

剣道のコンポーネントは正しくインスタンス化され、初期化されますが、作成後にデータに影響を与えると、コンポーネントはバインディングを認識せず、何もしません。何か案は ？

コンポーネントの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'>が隠されていることがわかります。これはすべてのデータを含むコンボボックスです。だから私はデータなしで表示された2番目のコンボボックスを持っていますか？

Answer 1

この奇妙な動作の原因を見つけました。プロジェクトのはじまりから、剣道JQueryを使用しており、kendo.all.jsを使用しています。私はなぜその理由が分かりませんが、kendo.all.jsは、新しいAngularコンポーネントのHTMLテンプレートkendo-comboboxに干渉し、奇妙な動作を引き起こすintempestive HTMLを挿入しているようです。

Answer 2

私は、コンポーネントの変化検出は、この場合にトリガされないと思われます。 createComponentは、そのコンポーネントに関連付けられた変更検出器を持つComponentRefを返します。ダイナミックコンポーネントが作成されると、そのChangeDetectorRefのdetectChanges()を呼び出すことができます。