Angular父子组件服务注入正确方式及继承报错解决方案

嘿，我来帮你解决这两个Angular的问题哈，咱们一个个来捋清楚：

问题1：如何将父组件构造函数中注入服务得到的值传递给子组件？ #

这里有几种实用的方法，根据你的场景选就行：

• 使用@Input()装饰器（最常用、最直观）
  这是父子组件传值的标准方式，步骤很简单：

  1. 子组件里定义一个输入属性，用来接收父组件传过来的值：

     @Component({
       selector: 'app-child',
       template: '<p>从父组件拿到的值：{{ parentPassedValue }}</p>'
     })
     export class ChildComponent {
       @Input() parentPassedValue: any; // 定义输入属性
     }
     

  2. 父组件的模板里，通过属性绑定把从服务拿到的value传给子组件：

     <app-child [parentPassedValue]="value"></app-child>
     

     这样子组件就能直接使用父组件从服务获取到的值啦。

• 通过共享服务直接获取（适合多组件共享场景）
  如果这个值是多个组件都需要的，也可以直接在子组件里注入同一个SomeService，直接读取someValue，不用父组件中转。不过如果父组件对值做了额外处理再传递，那还是@Input()更合适。

• 组件继承访问（仅限继承场景）
  如果你是像问题2里那样让子组件继承父组件，那父组件的protected属性value，子组件本来就可以直接访问，但前提是子组件的构造函数要正确传递父组件所需的依赖，这个咱们在问题2里细说。

问题2：Angular中父组件和子组件继承时的服务注入正确方式 #

你遇到的Expected 1 arguments, but got 0报错，核心原因是子组件继承父组件后，构造函数没有传递父组件构造函数需要的依赖。另外，@Component装饰的组件本身就具备可注入性，完全不需要额外加@Injectable，加了反而会破坏组件的特性哦。

正确的实现步骤： #

先看父组件的代码（稍微调整下，把服务设为protected，方便子组件访问）：

@Component({
  selector: 'app-parent',
  template: '<app-child></app-child>'
}) 
export class ParentComponent{ 
  protected value: any; 
  // 把someService设为protected，子组件就能直接访问
  constructor(protected someService: SomeService){ 
    this.value = someService.someValue; 
  } 
} 

子组件继承时，必须在构造函数中调用super()，并传入父组件需要的SomeService：

@Component({
  selector: 'app-child',
  template: '<p>直接用父组件的value：{{ value }}</p>'
}) 
export class ChildComponent extends ParentComponent {
  // 子组件构造函数必须调用super，传入父组件依赖的服务
  constructor(someService: SomeService) {
    super(someService); // 把服务传给父组件的构造函数，解决参数缺失的报错
  }
}

报错原因详解： #

当你创建子组件实例时，Angular会先调用父组件的构造函数。父组件的构造函数需要SomeService作为参数，但如果子组件的构造函数没有通过super()传递这个参数，就会触发“期望1个参数，但得到0个”的错误。

额外小贴士： #

• 不用给子组件加@Injectable，@Component已经包含了注入特性，重复添加会导致元数据冲突。
• 如果父组件的someService是protected或public，子组件还能直接用this.someService调用服务方法，不用重复注入（当然重复注入也没问题，因为Angular服务默认是单例的）。

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