Angular练习报错：Can't resolve all parameters for Component 求助

嘿，我来帮你搞定这个在Udemy练习Angular时遇到的组件传ID问题！你遇到的错误大概率是因为Angular组件的构造函数是用来做依赖注入的，不是用来接收父组件传入的普通参数的——如果你直接给构造函数加id这类参数，Angular会把它当成要注入的服务/依赖，找不到对应的提供者就会报错。

下面分两种常见场景给你讲正确的实现方式：

场景1：在模板中静态使用ClickComponent #

这是最常用的方式，用@Input()装饰器来接收父组件传入的ID值：

第一步：修改ClickComponent，添加@Input()属性 #

打开click.component.ts，定义一个带@Input()的id属性：

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

@Component({
  selector: 'app-click',
  templateUrl: './click.component.html',
  styleUrls: ['./click.component.css']
})
export class ClickComponent {
  // 用@Input()标记这个属性可以从父组件接收值
  @Input() id!: number;

  // 构造函数里不需要加id参数，只用来注入依赖（比如HttpClient这类）
  constructor() {}
}

第二步：在父组件（app.component）的模板中传入ID #

如果是手动写几个组件实例：

<!-- app.component.html -->
<app-click [id]="1"></app-click>
<app-click [id]="2"></app-click>
<app-click [id]="3"></app-click>

如果要批量生成（比如根据数组循环），可以用*ngFor：

<!-- app.component.html -->
<app-click 
  *ngFor="let item of clickItems; let index = index" 
  [id]="index + 1"
></app-click>

对应的app.component.ts里定义数组：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 这里可以根据你的需求定义数组长度，比如生成5个组件实例
  clickItems = Array(5).fill(0);
}

场景2：动态创建ClickComponent实例 #

如果是需要在代码里动态生成组件（比如根据用户操作添加），可以用ComponentFactoryResolver来创建实例并赋值ID：

第一步：还是先给ClickComponent加@Input() id #

和场景1的click.component.ts代码一样，确保有@Input() id!: number;

第二步：在父组件中动态创建并赋值 #

修改app.component.ts：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ClickComponent } from './click/click.component';

@Component({
  selector: 'app-root',
  // 用一个容器来承载动态生成的组件
  template: '<div #componentContainer></div>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 获取模板中的容器元素
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    // 生成3个带唯一ID的ClickComponent实例
    for (let id = 1; id <= 3; id++) {
      // 创建组件工厂
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ClickComponent);
      // 在容器中创建组件实例
      const componentRef = this.container.createComponent(componentFactory);
      // 给组件实例的id属性赋值
      componentRef.instance.id = id;
    }
  }
}

注意：Angular 9+ 启用Ivy编译器后，不需要再在NgModule的entryComponents里声明ClickComponent，但如果是旧版本，记得把它加进去哦。

总结一下 #

别再给组件构造函数加普通参数啦！Angular中父组件给子组件传值的标准方式就是用@Input()装饰器，构造函数只用来注入Angular的服务（比如HttpClient、Router这些）。按照上面的步骤改，应该就能解决你的问题了～

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