Angular指令转组件后失效报注入器错误，求技术帮助

看起来你在把Angular指令迁移到组件时遇到了典型的模块注册、控制器逻辑或绑定问题，我来帮你一步步排查和解决：

1. 先排查模块定义问题 #

注入器错误最常见的原因之一是模块没有正确初始化。如果myGrid模块是第一次创建，你需要在定义时加上依赖数组（哪怕是空的），否则Angular会认为你要获取一个已存在的模块，找不到就会报错：

// 错误写法：仅获取模块，若未提前定义则报错
// angular.module('myGrid').component(...)

// 正确写法：创建或获取模块，确保初始化
angular.module('myGrid', [])
  .component('myGrid', {
    bindings: { options: '=' },
    templateUrl: 'gridTemplate.html',
    controller: MyGridController
  });

// 控制器单独定义（推荐，更清晰）
function MyGridController() {
  var $ctrl = this;

  // 组件初始化钩子，替代原指令的link逻辑
  $ctrl.$onInit = function() {
    // 这里处理表格初始化逻辑，比如读取$ctrl.options配置
    if (!$ctrl.options) {
      console.warn('Grid options未正确传递');
      return;
    }
    // 比如渲染表格列、加载数据等逻辑
    console.log('表格配置:', $ctrl.options);
  };
}

2. 确认组件绑定与调用方式 #

组件默认使用controllerAs: '$ctrl'，所以在模板里访问绑定的属性需要通过$ctrl，同时调用组件时要确保父作用域传递了正确的options：

父控制器示例 #

angular.module('myGrid')
  .controller('AppController', function() {
    var vm = this;
    // 定义表格配置，确保结构和原指令一致
    vm.gridOptions = {
      columns: [{ field: 'name', displayName: '姓名' }, { field: 'age', displayName: '年龄' }],
      data: [{ name: '张三', age: 25 }, { name: '李四', age: 30 }]
    };
  });

调用组件的模板 #

<div ng-controller="AppController as vm">
  <!-- 注意组件名是短横线分隔，对应JS里的驼峰命名myGrid -->
  <my-grid options="vm.gridOptions"></my-grid>
</div>

3. 检查模板路径与内容 #

确保gridTemplate.html的路径正确（和app.js同级目录的话直接写文件名即可），模板里要使用$ctrl访问组件的属性，比如原指令模板里的options要改成$ctrl.options：

<!-- gridTemplate.html 示例 -->
<table>
  <thead>
    <tr>
      <th ng-repeat="col in $ctrl.options.columns">{{col.displayName}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in $ctrl.options.data">
      <td ng-repeat="col in $ctrl.options.columns">{{row[col.field]}}</td>
    </tr>
  </tbody>
</table>

4. 迁移原指令的link逻辑 #

如果原指令有link函数处理DOM操作或事件监听，组件里需要把这些逻辑迁移到控制器的生命周期钩子（比如$onInit、$postLink），因为组件没有link选项：

function MyGridController() {
  var $ctrl = this;

  $ctrl.$postLink = function() {
    // 这里处理原link函数里的DOM操作，比如绑定表格的点击事件
    var gridTable = document.querySelector('my-grid table');
    gridTable.addEventListener('click', function(e) {
      console.log('表格被点击:', e.target);
    });
  };
}

常见注入器错误的快速排查 #

• 如果报错$injector:modulerr：检查模块是否正确初始化（是否加了[]）、依赖的第三方模块是否引入
• 如果报错$injector:unpr：检查组件控制器是否依赖了未注入的服务，或者组件名拼写错误

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