Angular混合应用如何为降级组件配置&绑定传递函数输入

问题原因 #

downgradeComponent 生成的降级指令，默认对所有 @Input() 属性采用 AngularJS 的 '<' 单向值绑定策略。在 AngularJS 模板中使用旧写法 callback="someCallback" 时，'<' 绑定会直接把引号内的内容作为字符串字面量传递，因此组件拿到的是 "someCallback" 字符串，而非 scope 上挂载的函数引用，本质是默认绑定策略和旧指令的 '&' 表达式绑定规则不匹配导致的。

解决方案 #

不需要修改 Angular 组件代码，也不需要批量替换存量模板，注册降级指令时，手动覆写默认生成的指令定义对象（DDO）的 bindings 配置，将对应属性的绑定策略改为 '&' 即可：

angular.module('Directives').directive('myButton', ['$injector', function($injector) {
  // 获取downgradeComponent默认生成的指令定义
  const directiveDef = downgradeComponent({ component: MyButtonComponent })($injector);
  // 覆写绑定规则，将callback设置为&表达式绑定
  directiveDef.bindings = {
    ...directiveDef.bindings,
    callback: '&'
  };
  return directiveDef;
}]);

效果说明 #

• 完全兼容原有 AngularJS 模板写法 <my-button callback="someCallback"></my-button>，存量模板无需任何修改
• 组件侧不需要做任何调整，调用 this.callback() 时会自动触发父级 scope 上对应表达式的执行，和原 AngularJS 指令的 '&' 绑定行为完全一致
• 支持参数传递，和原生 '&' 绑定用法完全兼容：比如模板写 callback="someCallback($event)"，组件内调用 this.callback({ $event: clickEvent }) 即可正常传参

批量兼容处理 #

如果有多个组件需要做同类适配，可以封装通用工具函数，避免重复编写样板代码：

function downgradeWithExprBindings(component, exprInputs = []) {
  return ['$injector', function($injector) {
    const ddo = downgradeComponent({ component })($injector);
    const customBindings = {};
    exprInputs.forEach(inputName => customBindings[inputName] = '&');
    ddo.bindings = { ...ddo.bindings, ...customBindings };
    return ddo;
  }];
}

// 使用示例
angular.module('Directives')
  .directive('myButton', downgradeWithExprBindings(MyButtonComponent, ['callback']))
  .directive('confirmModal', downgradeWithExprBindings(ConfirmModalComponent, ['onOk', 'onCancel']));

注意事项 #

普通传值类的输入属性不要设置为 '&' 绑定，这类属性使用默认的 '<' 绑定即可，随意修改会导致普通参数传递异常。

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