Форматувач Angular
Форматуйте шаблони компонентів Angular за допомогою цього форматувача Angular. Вставте шаблон HTML зі структурними директивами, прив’язками та інтерполяцією — інструмент розмістить блокові елементи, як-от div, section, p, ul і table, на окремих рядках із відступом у два пробіли, прибере зайві пробіли й відформатує вбудовані блоки скриптів і стилів. Директиви, прив’язки та вирази залишаються без змін, тож розробники Angular швидко отримують охайні шаблони.
Поширені запитання
Що можна форматувати за допомогою форматувача Angular?
Він форматує шаблони компонентів Angular — HTML, які ви пишете у файлах .component.html або в рядку шаблону. Класи компонентів TypeScript тут не обробляються; для них скористайтеся форматувачем TypeScript.
Чи зберігаються директиви та прив’язки?
Так, атрибути, як-от *ngIf, *ngFor, [value], (click) і [(ngModel)], та інтерполяції, як-от {{ user.name }}, копіюються без змін. Змінюються лише пробіли між елементами.
Які елементи отримують окремі рядки?
Якщо елемент містить блокових нащадків, як-от div, section, article, header, footer, nav, main, form, p, h1—h6, ul, ol або table, кожен нащадок розміщується на окремому рядку з відступом. Елементи без таких нащадків залишаються в одному рядку, а послідовності пробілів згортаються до одного пробілу.
Чому мій власний компонент залишається в одному рядку?
Власні елементи, як-от app-root або mat-card, не є блоковими елементами HTML, тому їхній вміст залишається в одному рядку, якщо він не містить блокового елемента, як-от div або p. Щоб розгорнути вміст, обгорніть його блоковим елементом.
Чи розміщуються елементи списку в окремих рядках?
Не самі по собі: li не належить до блокових тегів, тому ul, єдиними нащадками якого є елементи li, залишається в одному рядку. Додайте до елементів блоковий вміст, як-от div, щоб рознести їх по рядках.
Що відбувається з тегами script і style?
Вбудовані блоки стилів форматуються як CSS, а вбудовані скрипти — як JavaScript, із відступом під відповідним тегом. Вміст елементів pre і textarea зберігається без змін.
Чи зберігаються коментарі HTML?
Так, коментарі HTML зберігаються та розміщуються на окремому рядку всередині розгорнутих елементів. Їхній вміст копіюється без змін, тож закоментована розмітка залишається такою, як була.
Чи перевіряє він мій шаблон?
Ні, він не компілює та не перевіряє шаблон, а незакриті теги форматує настільки коректно, наскільки можливо. Щоб знайти помилки в шаблоні, скористайтеся ng build або мовним сервісом Angular у своєму редакторі.
Чому результат оформлено як html-код?
Шаблони Angular — це HTML, тому результат повертається як блок коду Markdown з позначкою html. Скопіюйте рядки між роздільниками у файл шаблону.
Яким може бути розмір мого шаблону?
До 5 MB за один запуск; більший обсяг відхиляється з повідомленням. Результат ідентичний опції Angular у форматувачі коду.