Ограничения именования угловых компонентов - «селектор [имя вашего компонента] недействителен» - PullRequest
Новая
       9

Ограничения именования угловых компонентов - «селектор [имя вашего компонента] недействителен»

0 голосов
/ 09 ноября 2018

В Angular 6 (6.0.7) Я пытаюсь создать компонент через CLI. Я набираю ng g c t01-01-03-lu-user и получаю сообщение об ошибке Selector (app-t01-01-03-lu-user) is invalid.

Есть ли что-то, по сути, не разрешенное в этом имени? Я уже создал родительский модуль с именем t01-cafe через ng g module t01-cafe, и он был успешно создан. В этом модуле я пытаюсь создать этот компонент.

Я пытался создать другое имя, такое как ng g c t01-testComponent, и оно отлично работает - так что CLI не поврежден. Что-то в названии компонента t01-01-03-lu-user в моей настройке не нравится Angular.

РЕДАКТИРОВАТЬ: после дальнейшего тестирования, похоже, что Angular не нравится, когда первый символ после тире - является числом. Возможно, такое же ограничение, как в переменных JavaScript. Я предполагаю, так как это скомпилировано в JavaScript? Кто-нибудь может уточнить / подтвердить это ограничение именования компонентов?

1 Ответ

0 голосов
/ 09 ноября 2018

Согласно стандартам W3C селектор должен соответствовать нижеуказанному набору вещей

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторы) могут содержать

  1. только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание (_);
  2. они не могут начинаться с цифры, двух дефисов или дефиса, за которыми следует цифра
  3. Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор "B & W?" может быть написано как "B \ & W \?" или "B \ 26 W \ 3F".

Итак, Angular следует соглашению W3C для имени селектора. Я ожидал увидеть нечто подобное, запеченное во внутреннем коде. После копания в коде CLI Оказывается, что angular использует регулярное выражение (/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/) для проверки имени selector перед созданием файлов.

Поэтому при выполнении команды ng generate component component-name она вызывает @angular/schematics для команды component и передает ей параметр имени компонента. При выполнении команды с набором команд запускается ниже строки для проверки селектора. 

validateHtmlSelector(options.selector);

validation.ts 

export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
export function validateHtmlSelector(selector: string): void {
  if (selector && !htmlSelectorRe.test(selector)) {
    throw new SchematicsException(tags.oneLine`Selector (${selector})
        is invalid.`);
  }
}
...