Angular17独立组件中使用ng-select v12报错求助

问题原因 #

ng-select v12版本的组件并非独立组件，无法直接添加到独立组件的imports数组中，必须通过NgModule间接导入。

解决方案步骤 #

1. 创建封装ng-select的NgModule

新建一个模块文件（比如ng-select-wrapper.module.ts），在其中导入并导出NgSelectModule：

import { NgModule } from '@angular/core';
import { NgSelectModule } from '@ng-select/ng-select';

@NgModule({
  imports: [NgSelectModule],
  exports: [NgSelectModule]
})
export class NgSelectWrapperModule { }

2. 在独立组件中导入封装模块

修改你的ServiceEditComponent，将原来的NgSelectComponent替换为上述封装模块：

import { NgSelectWrapperModule } from './ng-select-wrapper.module'; // 替换为你的实际文件路径
@Component({
 selector: 'app-service-edit',
 standalone: true,
 imports: [ReactiveFormsModule, HttpClientModule, NgSelectWrapperModule],
 templateUrl: './service-edit.component.html',
 styleUrl: './service-edit.component.css',
})
export class ServiceEditComponent {
  sites = []; // 这里替换为你的实际数据源
}

3. 修正模板选项写法

ng-select组件需要使用<ng-option>而非原生<option>，调整HTML模板：

<ng-select>
    @for (site of sites; track site.id){
        <ng-option [value]="site.id">{{site.name}}</ng-option>
    }
</ng-select>

4. 导入ng-select样式

在angular.json的styles数组中添加ng-select的样式文件，确保样式正常加载：

"styles": [
  "node_modules/@ng-select/ng-select/themes/default.theme.css",
  "src/styles.css"
]

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