如何在组件中注入带默认值的指令？避免NullInjectorError并实现复用

你遇到的问题核心在于Angular的依赖注入（DI）系统默认会强制查找指定依赖，找不到就直接抛出NullInjectorError——直接给参数设默认值null是无效的，因为DI系统会优先尝试注入，失败后直接报错，不会 fallback 到默认值。

正确的解决方式是使用Angular提供的@Optional()装饰器，它能告诉DI系统：如果找不到目标依赖，就注入null而非抛出错误。

修改后的Component5代码 #

import { Component, Optional } from '@angular/core'; // 务必导入Optional装饰器

@Component({
 selector: 'component5',
 templateUrl: './component5.html',
 styleUrls: [ './component5.scss' ],
})
export class Component5 {
 constructor(
  @Optional() public customRootDirective: CustomRootDirective, // 添加@Optional()装饰器
 ) {}

 someMethod(){
  // 使用前先做空值检查，避免触发空指针错误
  if(this.customRootDirective) {
    console.log(this.customRootDirective.elementRef.nativeElement.innerText);
  } else {
    // 无customRootDirective时的兜底逻辑
    console.log('未找到customRootDirective');
  }
 }
}

为什么这能解决问题？ #

• @Optional()装饰器会改变DI系统的行为：当找不到CustomRootDirective的提供者时，它会注入null而不是抛出错误。
• 后续在组件方法中必须先检查customRootDirective是否为null，再调用其属性或方法，否则会触发空指针异常。

这样修改后，无论祖先组件是否存在customRootDirective，你的Component5都能正常运行啦！

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