降级 Angular JS 的所有 Angular 组件的优雅方法

Question

我的应用程序应该从 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)

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

Answer 1

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

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];
   }
   

2. 对于每个组件，获取选择器名称。如果不使用AOT编译，则可以selector从装饰器中获取值@Component。但如果你确实使用它，那将不起作用，你可以从组件名称创建一个选择器

   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);
   }
   

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

   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 }));
     }
   }