Переопределение угловой схемы

AngularInDepth уходит от Medium. Более свежие статьи размещаются на новой платформе inDepth.dev. Спасибо за то, что участвуете в глубоком движении!

В этом сообщении блога мы узнаем, как можно переопределить некоторые параметры по умолчанию в Angular Schematics.

Вступление

На прошлой неделе я работал над библиотекой Angular, и во всех компонентах мы хотели установить инкапсуляцию на None и изменитьDetection на OnPush. Мы также хотели добавить в экспорт все компоненты и директивы, чтобы их можно было использовать в других модулях.

Мы поняли, что добавление вручную для каждого компонента и модуля будет пустой тратой усилий.

Решение

Чтобы избежать этого, используйте angular.json, и теперь вы должны быть похожи на Джоуи, и он хочет увидеть решение.

И не только для компонентов, мы можем переопределить параметры схемы из директив, классов, служб и многого другого. Чувствую себя нижестоящим парнем.

Мы приближаемся, просто подождите, мы все это сделаем без написания кода.

Переопределение параметров схемы

Каждый разработчик знает о angular.json, и большую часть времени мы продолжаем использовать предоставленные по умолчанию параметры и не пытаемся понять, что еще он может предложить.

Итак, давайте посмотрим на параметры, предоставляемые angular.json создать одно приложение Angular с помощью CLI.

Вот как выглядит ваш angular.json.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "bulma-app": {
      "projectType": "application",
      "schematics": {
        
      },
      "root": "projects/bulma-app",
      "sourceRoot": "projects/bulma-app/src",
      "prefix": "app",
      "architect": {
        
      }
    }
  },
  "defaultProject": "bulma-app"
}

И интересующий нас вариант - schematics. Это открывает для нас много возможностей.

Как вы можете видеть выше, как только мы перейдем внутрь параметров схемы, мы можем переопределить несколько параметров, выбрав один из следующих, в зависимости от того, что вы хотите переопределить.

@ schematics / angular: компонент
@ schematics / angular: класс
@ schematics / angular: директива
@ schematics / angular: модуль
@ schematics / angular: pipe
@ schematics / angular: сервис

Мы возьмем пример @schematics/angular:component в вашем проекте и ниже json.

"@schematics/angular:component": {
  "changeDetection": "OnPush",
  "inlineTemplate": true,
  "viewEncapsulation": "None"
}

Следующим шагом является выполнение приведенной ниже команды для создания компонента.

ng generate component home

И обратите внимание на отличие от ранее созданного компонента: у вас не будет .html файла и вам будут доступны свойства changeDetection и viewEncapsulation.

Заключение

Мы не охватываем все объекты недвижимости, так как это будет для вас, чтобы изучить и использовать наиболее подходящие варианты для вашего проекта. Схема действительно мощная, и это то, что управляет различными командами в Angular CLI, такими как создание компонента, создание службы, но вам могут не понадобиться параметры по умолчанию и может потребоваться переопределить некоторые свойства схемы, используя эти параметры, не нужно вносить изменения вручную. Идите вперед, автоматизируйте и определите лучшие варианты для вашего проекта.

Переопределение угловой схемы