элегантный способ понизить все угловые компоненты для угловых JS

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