组件之间的角度状态管理（直接依赖）返回 NullInjectorError - R3InjectorError

Question

我在 Angular 应用程序中遇到 NullInjectorError，需要帮助解决它。这是我的组件的结构：

我的 Angular 应用程序中有三个主要组件：ProductRegistrationAndListingScreen、ProductList 和 ProductRegistration。

ProductRegistrationScreen 是包含其他两个组件的父组件。 ProductList 负责显示产品列表。 ProductRegistration 用于添加新产品。 我试图在 ProductRegistration 和 ProductList 之间建立通信，而不直接向这些组件注入额外的服务或依赖项。我在 ProductRegistration 中有一个布尔变量，我想用它来触发 ProductList 中的刷新。

相关代码如下：

产品注册和列表屏幕组件：

 export class ProductRegistrationAndListingScreen{

  isRegistrationMode: boolean = true;
  isEditMode: boolean = false; 

  constructor(private productList: ProductList, private productRegistration: ProductRegistration) {}

  ngOnInit() {
    this.initiateContinuousUpdate();
  }  

  toggleScreenMode() {
    this.isRegistrationMode = !this.isRegistrationMode;
    this.isEditMode = !this.isEditMode;
  }

  initiateContinuousUpdate() {
    setInterval(() => {
      const registrationFormActive = this.productRegistration.isFormActive();      

      if (registrationFormActive) {
        this.productList.loadProducts();
        this.productRegistration.setFormActive(false);
      }

    }, 1000); 
  }
}

产品列表组件：

export class ProductList implements OnInit {

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.loadProducts();  
  }
  
  productList: Product[] = [];
  shouldReloadForm: boolean = false;  

  setFormActive(active: boolean) {
    this.shouldReloadForm = active;
  }

  isFormActive(){
    return this.shouldReloadForm;
  }

  loadProducts() {
    const path = 'products';
    this.productService.get<Product[]>(path).subscribe(
      (products) => {
        this.productList = products;
      },
      (error) => {
        console.error('Error loading products:', error);
      }
    );
  }
}

产品注册组件：

export class ProductRegistration {

  constructor(private productService: ProductService) {}

  productList: Product[] = [];
  isFormActive: boolean = false;

  product: Product = {
    id: 0,
    code: '',
    name: '',
    purchasePrice: 0,
    brand: '',
    manufacturer: ''
  };  

  isFormActive()
  {
    return this.isFormActive;
  }

  setFormActive(value : boolean)
  {
    this.isFormActive = value;
  }

  toggleForm() {
    this.isFormActive = !this.isFormActive;
  }
}

它返回给我这个错误：

core.mjs:10920 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[ListaProdutoComponent -> ListaProdutoComponent]: 
  NullInjectorError: No provider for ListaProdutoComponent!
NullInjectorError: R3InjectorError(AppModule)[ListaProdutoComponent 

我不想在 ProductRegistration 或 ProductList 中实现服务，就像这些方法一样，因为这两个类都应该重用：

export class ListaProdutoComponent implements OnInit {
  constructor(private sharedService: SharedService) {}

ngOnInit() {
    this.sharedService.refreshEmitter.subscribe(() => {
....

export class SharedService {
  refreshEmitter: EventEmitter<void> = new EventEmitter<void>();

  triggerRefresh() {
    this.refreshEmitter.emit();
  }

Answer 1

检查你的服务中@Injectable注解是否如下所示

@Injectable({
  providedIn: 'root'
})

Answer 2

通常你不会像你想要的那样注入组件。您通过构造函数注入服务。如果你想说有一个 Abc 组件和一个包含 Abc 列表的 AbcList 组件......你需要确保它们被声明或导入到 Angular 中的当前模块文件中。然后，您可以在 AbcList 的模板（html 文件）中使用 Abc 组件的标记，如 ，从而组成聚合（通常使用 *ngFor 等循环指令）。此外，AbcList 可以获取列表，然后在模板中将 Abc 上的数据作为 @Input() 参数传入。

您可能想查看英雄教程：https://angular.io/tutorial/tour-of-heroes