Новый control flow в Angular (@if, @for, @switch)
В этом уроке мы поговорим о современном control flow в Angular
В прошлых версиях Angular control flow заключался в наличии структуруных директив *ngIf, *ngFor и *ngSwitch. О них я рассаказывал в одном из предыдущих уроков
Новый control flow делает читабельность кода шаблона удобнее. Суть работы остается той же.Но следует отметить несколько моментов, которые касаются @for (см пример кода ниже):
- обязательное использование track
- наличие блока @empty
Ключевое слово track необходимо для оптимизации работы с отрисовкой коллекции, которую мы отрисовываем в шаблоне. Если нам требуется работать с элементами этой коллекции, то track помогает избежать лишнего рендеринга при изменении этой коллекции, что положительно сказывается на производительности.
Что касается @empty — это удобное дополнение к блоку @for, когда надо отрисовать некий empty placeholder блок (текст или компонент), когда коллекция пуста.
app.component
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
imports: [
],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
protected user = {
login: 'my login',
roles: []
};
protected currentRole = 'manager2';
}
app.component.html
<!--@let myName = user$ | async;-->
@if (user?.login) {
<p>{{user.login}}</p>
@for (role of user.roles; track role) {
<span>{{role}}</span><br>
} @empty {
<p>No roles for current user</p>
}
} @else {
<p>No login</p>
}
@switch (currentRole) {
@case ('admin') {
<p>Hello admin</p>
}
@case ('manager') {
<p>Hello manager</p>
}
@default {
<p>Unsupported role</p>
}
}
0 Комментариев