Используйте [ha sh: base64: 5] в JavaScript / файле TypeScript

Question

Я использую CSS Модули в Angular Проекте с Webpack. Я уже преобразовал имена классов в .css и .scss файлах с post css -модулями .

Затем с post html - css - modules Я изменил значения свойства class в элементах html для его значения ha sh, определенного как postcss-modules.

Могу сказать, что все работает нормально ?.

Теперь у меня есть новая задача, которую нужно решить.

Angular, имеет функцию, которая позволяет динамически изменять значение class в элементе html в зависимости от условия:

https://angular.io/api/common/NgClass

Например, я могу сделать:

<div [className]="myVar ? 'myClass1' : 'myClass2' " >

Если myVar = true, то html элемент будет:

<div class="myClass1" >

А если myVar = false, то элемент html будет:

<div class="myClass2" >

Like Я не знаю, что будет значением myVar во время компиляции (поскольку значение myVar зависит от действий пользователя) Я не могу установить значение для <div css-module="myClass1" > или <div css-module="myClass2" >, чтобы ха sh имена классов myClass1 или myClass2.

НО (вот мое решение) ...

Если я могу вызвать ту же функцию, что и [hash:base64:5] (https://github.com/css-modules/postcss-modules#generating -scoped- names )

Я могу создать функцию, которая получает строку в качестве параметра и возвращает имя класса в виде ха sh.

Это будет примерно так:

<div [className]="setMyClassNameInHash(myVar)">

Тогда в javascript:

function setMyClassNameInHash(condition) {
      return  condition ? doHash64('myClass1') : doHash64('myClass1');
}

doHash64() будет функция, которая принимает строку и возвращает га sh, используя [hash:base64:5].

В заключение мой вопрос:

¿Как я могу вызвать ту же функцию, что и [ha sh: base64: 5] в javascript файле?

Спасибо !!!!

Answer 1

Вам нужно будет интегрировать шаблонный процесс в процесс сборки. Плагин экспортирует имена классов и их сопоставленные имена в файл json, так что вы можете искать хешированное имя класса из оригинала.

Редактировать: Поскольку только встроенные шаблоны работает для одного имени класса и не поддерживает замену имен классов в таких атрибутах, как angular, вы можете создавать шаблоны самостоятельно, используя библиотеку шаблонов, такую ​​как loda sh. Если вы уже используете grunt или gulp, я бы порекомендовал использовать их задачи шаблона вместо этого ручного способа, потому что они многое для вас делают, например, поддерживают несколько файлов.

В вашем html, вы можете использовать разделители loda sh, чтобы получить хешированное имя класса, например:

<div [className]="myVar
     ? '<%= getHashedClass('myClass1') %>'
     : '<%= getHashedClass('myClass2') %>' " >

Ваш скрипт сборки узла может выглядеть следующим образом:

var fs = require('fs');

postcss([
  require("postcss-modules")({
    // Callback to get hashed class names
    getJSON: function(cssFileName, classNames, outputFileName) {
      var filePath = '/path/to/outputDir/file.html';

      // Function to lookup hashed class names
      var getHashedClass = function(unhashedClass) {
        return classNames[unhashedClass];
      }

      // Read your html file as a string
      var html = fs.readFileSync(path),

      // Use lodash to template it, passing the class lookup function
      var compiled = _.template(html);
      var templated = compiled({
        getHashedClass: getHashedClass
      });

      // Write the templated html
      fs.writeFileSync(path, templated);
    }
  })
]);