Останній випуск Angular, 19.2.0-next.0, вводить потужне покращення, яке розробники точно оцінять: підтримка нетегованих шаблонних літералів у виразах. Ця функція надає більшу гнучкість та виразність Angular шаблонам, дозволяючи розробникам писати чистіші, лаконічніші та динамічніші шаблони без зайвих обхідних шляхів. Давайте розглянемо, що це означає і як ви можете використати це у своїх додатках.
Ключові випадки використання
Ось кілька практичних прикладів того, як нетеговані шаблонні літерали можуть спростити ваші шаблони в Angular:
1. Динамічний контент
Ви можете безпосередньо вставляти динамічні вирази у ваші шаблони:
Повідомлення: {{ `Привіт, ${name} - ${value}` }}
2. Динамічні класи
Створення динамічних імен класів ще ніколи не було таким простим:
Клас: {{ `custom-class-${postfix}` }}
Ці два приклади досягають одного й того ж результату: динамічно призначають класи на основі значення postfix.
3. Інтерполяції з кількома виразами
Легко обробляти більш складні інтерполяції:
З інтерполяціями: {{ `Привіт ${name}, зараз ${timeOfDay}!` }}
4. Пайпи та шаблонні літерали
Шаблонні літерали також можна комбінувати з пайпами Angular:
З пайпом: {{ `hello ${name}` | uppercase }}
У цьому випадку весь шаблонний літерал передається через пайп uppercase, перетворюючи текст на великий регістр.
5. Динамічні URL
Спрощує створення динамічних URL для зображень або інших ресурсів:
Динамічний URL: {{ `https://example.com/images/${imageId}.jpg` }}
6. Цикли з шаблонними літералами
Ви можете використовувати нетеговані шаблонні літерали навіть в структурних директивах Angular, як-от @for:
@for(n of [1,2,3]; track $index) {
{{ `Клікни ${n}` }}
}
Це дозволяє динамічно відображати повторюваний контент, вбудовуючи значення безпосередньо в рядки.
Слідкуйте за мною на Medium або Twitter щоб дізнатись більше про Angular та JS!
Перекладено з: Enhancing Angular Templates with Untagged Template Literals