为 Angular js 降级所有 Angular 组件的优雅方法答案

【问题标题】：elegant way to downgrade all angular components for angular js为 Angular js 降级所有 Angular 组件的优雅方法
【发布时间】：2019-07-19 16:04:30
【问题描述】：

我的应用应该从 angularjs 迁移到 angular。

我正在创建新的角度组件。有没有一种优雅的方式来自动导入和降级组件？

当前代码：

import { ColorPickerComponent } from './angular-comp/color-picker/color-picker.component';
import {FileSelectComponent } from './angular-comp/file-select/file-select.component';


export default angular
    .module('kn-components', myModuleNames)
    .directive('colorPicker', downgradeComponent({component: ColorPickerComponent}))
    .directive('fileSelect', downgradeComponent({component: FileSelectComponent}))
    .name;

每次我创建一个我需要做的组件时，它都非常冗长......

例如，对于我的 angularjs 组件，我做了以下操作：

const myModuleNames = [];
const loadModules = require.context(".", true, /\.module.js$/);
loadModules.keys().forEach(function (key) {
    if(loadModules(key).default)
        myModuleNames.push(loadModules(key).default);
});

然后：

export default angular
    .module('kn-components', myModuleNames)

我所有的模块/组件都被导入了

【问题讨论】：

您的意思是“降级”还是“升级”？大多数人会同意从 AngularJS 到 Angular 是一种“升级”。我不知道你往哪个方向走。
我的意思是降级
我的应用程序应该从 angularjs 迁移到 angular。 => 这是什么意思？降级？没有。
请参考：angular.io/guide/upgrade#upgrading-with-ngupgrade。如果您对我的问题有答案，可以发帖。
只是为了确保您知道，AngularJS 现在处于生命周期结束状态，直到 2021 年 6 月 30 日。那时没有更多的更新，也没有安全补丁。您是否因为额外的代码行（样板文件）而降级？还是有技术原因导致您不能继续使用 Angular？ blog.angular.io/…。另外，如果你真的要降级，你降级的目标是TS还是JS？哪个ES版本？你还在考虑使用模块吗？

标签： angularjs angular

【解决方案1】：

如果目标是摆脱样板代码，您可以获取要升级的组件列表，获取每个组件的选择器名称并注册相应的指令

获取您的组件列表。这取决于您的代码结构。最简单的选择是仅显式返回您需要降级的组件。或者您可以像在示例中那样使用require.context。

function getComponents() {
  // depends on how your components are organized
  // for example, iterate over require.context(".", true, /\.component.ts$/);
  // or return fixed array
  return [ColorPickerComponent, FileSelectComponent];
}

为每个组件获取选择器名称。如果不使用 AOT 编译，可以从 @Component 装饰器中获取 selector 值。但是如果你确实使用它，那将不起作用，你可以从组件名称中制作选择器

function getComponentSelector(component) {
  // if you don't need AOT
  return toCamelCase(component.__annotations__[0].selector);

  // if you do need it
  let name: string = component.name;
  const suffix = 'Component';
  if (name.endsWith(suffix)) {
    name = name.substr(0, name.length - suffix.length);
  }
  return uncapitalize(name);
}

function toCamelCase(selector: string) {
  const splitted = selector.split('-');
  for (let i = 1; i < splitted.length; i++) {
    splitted[i] = capitalize(splitted[i]);
  }
  return splitted.join('');
}

function capitalize(name: string) {
  return name.charAt(0).toUpperCase() + name.slice(1);
}

function uncapitalize(name: string) {
  return name.charAt(0).toLowerCase() + name.slice(1);
}

迭代您的组件并注册降级的组件

downgradeComponents(angular.module('kn-components'));

function downgradeComponents(module: ng.IModule) {
  const components = getComponents();
  for (const component of components) {
    const selector = getComponentSelector(component);
    module.directive(selector, downgradeComponent({ component }));
  }
}

【讨论】：