Angular 16派生类依赖注入错误：注入对象不符问题排查

核心诱因 #

你遇到的注入错误是Angular依赖注入逻辑与Material组件继承机制冲突导致的：

• 全局注册MatTabNav提供者打破了组件树的层级注入规则，Material的MatTabLink依赖宿主组件层级的MatTabNav实例，全局提供者会干扰注入器的查找逻辑。
• 你的MatOrientedLink组件可能未正确使用@Host()装饰器限定注入范围，导致注入器错误匹配到自身实例（而非父容器）。

具体修复步骤 #

1. 移除全局MatTabNav提供者
   删掉模块或根组件中providers数组里的MatTabNav配置，全局注册会覆盖组件层级的注入上下文，导致子组件无法找到父容器实例。

2. 正确配置MatOrientedNav的提供者映射
   在MatOrientedNav的组件元数据中，添加提供者映射，确保子组件请求MatTabNav时返回当前MatOrientedNav实例：

   @Component({
     selector: 'mat-oriented-nav',
     template: '<ng-content></ng-content>',
     providers: [{ provide: MatTabNav, useExisting: MatOrientedNav }],
     // 其余样式/元数据配置
   })
   export class MatOrientedNav extends MatTabNav {
     // 你的方向处理逻辑
   }
   

3. 给MatOrientedLink的注入添加@Host()装饰器
   在MatOrientedLink的构造函数中，用@Host()限定MatTabNav的查找范围为当前宿主父容器：

   constructor(
     @Host() @Optional() tabNavBar: MatTabNav,
     // 其他父类所需依赖
   ) {
     super(tabNavBar, /* 传递父类构造函数参数 */);
   }
   

   @Host()会强制注入器仅查找当前组件的直接宿主（即父级MatOrientedNav），避免错误匹配到全局或自身实例。

4. 清理MatOrientedLink的错误提供者配置
   确保MatOrientedLink的组件元数据中没有添加MatTabNav相关的providers配置，这会导致注入器错误地将自身作为MatTabNav实例返回。

验证 #

修改完成后，MatOrientedLink的构造函数将正确获取到父级MatOrientedNav实例，_items属性可正常访问，toArray的未定义错误会消失。

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