将CSS模型应用于AngularJS的更好方法

Question

我现在使用具有AngularJS 1.5组件的CSS模型。堆栈是webpack css-loader?modules=true angular 1.5 components pug。

目前，我必须执行以下步骤才能在我的哈巴狗模板中使用CSS模块。

// my-component.js
import template from 'my-component.pug';
import styles from 'my-component.css';
class MyComponent {
    constructor($element) {
        $element.addClass('myComponent');        // ------ (1)
        this.styles = styles;                    // ------ (2)
    }
}
angular.module(name, deps)
    .component('my-component', {
        controller: MyComponent,
        template: template,
    });
// my-component.pug
div(class={{ ::$ctrl.styles.fooBar }}) FooBar    // ----- (3)
// my-component.css
.myComponent { background: green; }
.fooBar { color: red; }

有两个问题：

1. 每个组件都必须注入$element并手动设置其类名称。这样做的原因是，AngularJS组件标签本身存在于结果HTML中，而没有任何类，这使CSS变得困难。例如，如果我在上面使用MyComponent：

   <div>
     <my-component></my-component>
   </div>
   

   它将生成以下HTML：

   <div>
     <my-component>
       <div class="my-component__fooBar__3B2xz">FooBar</div>
     </my-component>
   </div>
   

   与ReactJ相比，<my-component>在上述结果中是额外的，有时会使CSS难以编写。因此，我的解决方案是（1），在其中添加一个类。

2. 模板中的类太长（3）。我知道这是参考$ctrl.styles.fooBar的正确方法，但这太长了。

我理想的解决方案就是这样：

// my-component.js
angular.module(name, deps)
    .component('my-component', {
        controller: MyComponent,
        template: template,
        styles: styles,
    });
// my-component.css
div(css-class="fooBar") FooBar

这个想法是：

1. 使angular.module().component支持额外的styles属性，该属性将在控制器中自动执行（2）this.styles = styles;，并应用（1）$element.addClass()。
2. 指令css-class将$ctrl.styles应用于元素。

我的问题是，我不知道如何实现上面的想法1（2很容易）。如果有人可以对此分享一些启示，我很感激。

Answer 1

我想出了一个我不太满意的解决方案。

角组件可以接受函数作为模板并注入$element。doc

如果模板是一个函数，则向其注入以下当地人：

• $元素 - 当前元素
• $ attrs-元素的当前属性对象

因此，我们可以在模板函数中附加组件（.myComponent）的主类，然后将REGEX替换为类名称的所有出现，用编译的类名称。

// utils.js
function decorateTemplate(template, styles, className) {
    return ['$element', $element => {
        $element.addClass(styles[className]);
        return template.replace(/${(w+)}/g, (match, p1) => styles[p1]);
    }];
}
// my-component.js
import style from './my-component.css';
import template from './my-component.pug';
import { decorateTemplate } from 'shared/utils';
class MyComponent {
    // NO NEED to inject $element in constructor
    // constructor($element) { ...
}
angular.module(name, deps)
    .component('myComponent', {
        // decorate the template with styles
        template: decorateTemplate(template, styles, 'myComponent'),
    });
// my-component.pug, with special '${className}' notation
div(class="${fooBar}") FooBar

decorateTemplate使用Regex更换和模板必须使用特殊符号${className}来指定CSS-MODULES类名称。

欢迎任何建议。

更新

我更新了我的decorateTemplate()功能以利用PUG功能，因此可以将本地类名称写为._localClassName。

// utils.js
function decorateTemplate(template, styles, className) {
    return ['$element', ($element) => {
        $element.addClass(styles[className]);
        return template.replace(/sclass="(.+?)"/g, (match, p1) => {
            let classes = p1.split(/s+/);
            classes = classes.map(className => {
                if (className.startsWith('_')) {
                    let localClassName = className.slice(1);
                    if (styles[localClassName]) {
                        return styles[localClassName];
                    } else {
                        console.warn(`Warning: local class name ${className} not found`);
                        return className;
                    }
                } else {
                    return className;
                }
            });
            return ' class="' + classes.join(' ') + '"';
        });
    }];
}
// my-component.pug
._fooBar FooBar

尽管这要容易得多，但它不会消除古怪的符号（以本地类名称为_开始）和REGEX替换。

欢迎任何建议。