将Kendo ColorPicker弹窗追加到'component'时出现container.createComponent报错

在Angular项目中使用Kendo ColorPicker时，若设置popupSettings.appendTo为字符串'component'，会触发Error: container.createComponent is not a function错误，问题代码如下：

<kendo-colorpicker
    [view]="view"
    [format]="format"
    [paletteSettings]="settings"
    [(value)]="color"
    [popupSettings]="{ appendTo: 'component'}"
>
</kendo-colorpicker>

报错原因 #

当指定appendTo: 'component'时，Kendo组件需要接收Angular ViewContainerRef实例作为弹窗的挂载容器，直接传入字符串'component'不符合要求，导致组件无法正确调用容器的createComponent方法。

解决步骤 #

1. 在组件类中注入ViewContainerRef：

import { Component, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 组件原有属性示例
  view = 'palette';
  format = 'hex';
  settings = { /* 自定义调色板配置 */ };
  color = '#ff0000';

  constructor(public viewContainerRef: ViewContainerRef) {}
}

2. 在模板中绑定popupSettings时，传入注入的ViewContainerRef实例：

<kendo-colorpicker
    [view]="view"
    [format]="format"
    [paletteSettings]="settings"
    [(value)]="color"
    [popupSettings]="{ appendTo: viewContainerRef}"
>
</kendo-colorpicker>

其他可选方案 #

如果不需要将弹窗挂载到当前组件容器，也可以选择以下两种无需注入的配置：

• 挂载到根容器：[popupSettings]="{ appendTo: 'root'}"
• 挂载到body：[popupSettings]="{ appendTo: 'body'}"

内容的提问来源于stack exchange，提问作者mohammed fahimullah