Angular 组件或指令匹配“jhi-product-list”元素超出了当前 Angular 模块的范围

Posted 2023-03-13

【中文标题】Angular 组件或指令匹配“jhi-product-list”元素超出了当前 Angular 模块的范围

【英文标题】：Angular Component or directive matching' jhi-product-list' element is out of the current Angular module's scope

【发布时间】：2021-10-10 23:22:32

【问题描述】：

我有 2 个组件 Home 组件是 Home Page 产品列表组件，它将向我显示产品列表

问题：当我尝试将产品列表选择器添加到 home.component.html 时，我收到此错误：

product-list.component.ts

import  Component, OnInit  from '@angular/core';
import ProductService from "../services/product.service";
import Product from "../entities/product";

@Component(
  selector: 'jhi-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
)
export class ProductListComponent implements OnInit 


  products! : Product[];

  constructor(private productService : ProductService)  

  ngOnInit(): void 
    this.listProducts();
  

  listProducts()
    this.productService.getProductList().subscribe(
        data => 
         this.products = data;
      
    )
  

product-list.component.html

<p *ngFor="let tempProduct for products">

  tempProduct.name: tempProduct.unitPrice | currency:'USD'
</p>

Home.component.html

<div class="row">

<jhi-product-list> </jhi-product-list>

</div>

谢谢。

【问题讨论】：

您是否将 ProductListComponent 添加到模块中的声明中？

是的，我确实从 './product-list/product-list.component' 导入 ProductListComponent ；

【参考方案1】：

您需要将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”并在模块中声明该组件，如下所示：

import  ProductListComponent  from './product-list/product-list.component';
import  CUSTOM_ELEMENTS_SCHEMA  from '@angular/core';

@NgModule(
  declarations: [ProductListComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
)
export class ProductListModule