Понимание привязки¶

В шаблоне Angular привязка создает живую связь между частью пользовательского интерфейса, созданной на основе шаблона (элементом DOM, директивой или компонентом), и моделью (экземпляром компонента, к которому принадлежит шаблон). Эта связь может использоваться для синхронизации представления с моделью, для уведомления модели, когда в представлении происходит событие или действие пользователя, или и то, и другое. Алгоритм Angular Обнаружение изменений отвечает за синхронизацию представления и модели.

Примеры привязки включают:

интерполяции текста
привязка свойств
привязка событий
двустороннее связывание

Связывание всегда состоит из двух частей: цель, которая будет получать связанное значение, и шаблонное выражение, которое производит значение из модели.

Синтаксис¶

Шаблонные выражения аналогичны выражениям JavaScript. Многие выражения JavaScript являются законными шаблонными выражениями, за следующими исключениями.

Вы не можете использовать выражения JavaScript, которые имеют или поощряют побочные эффекты, включая:

Присваивания (=, +=, -=, ...)
Такие операторы как new, typeof или instanceof
Цепочка выражений с ; или ,
Операторы инкремента и декремента ++ и --
Некоторые операторы ES2015+

Другие заметные отличия от синтаксиса JavaScript включают:

Отсутствие поддержки побитовых операторов, таких как | и &.
Новые операторы шаблонных выражений, такие как |.

Контекст выражения¶

Интерполированные выражения имеют контекст — определенную часть приложения, к которой принадлежит выражение. Обычно таким контекстом является экземпляр компонента.

В следующем фрагменте выражение recommended и выражение itemImageUrl2 относятся к свойствам AppComponent.

<h4>{{recommended}}</h4>
<img alt="item 2" [src]="itemImageUrl2" />

Выражение также может ссылаться на свойства контекста шаблона, такие как входная переменная шаблона или переменная ссылки шаблона.

В следующем примере используется входная переменная шаблона customer.

<ul>
    <li *ngFor="let customer of customers">
        {{customer.name}}
    </li>
</ul>

В следующем примере используется переменная ссылки на шаблон, #customerInput.

<label
    >Type something:
    <input #customerInput />{{customerInput.value}}
</label>

Шаблонные выражения не могут ссылаться ни на что в глобальном пространстве имен, кроме undefined. Они не могут ссылаться на window или document. Кроме того, они не могут вызывать console.log() или Math.max() и ограничены ссылками на члены контекста выражения.

Предотвращение столкновений имен¶

Контекст, по которому оценивается выражение, представляет собой объединение переменных шаблона, контекстного объекта директивы — если он есть — и членов компонента. Если вы ссылаетесь на имя, принадлежащее более чем одному из этих пространств имен, Angular применяет следующую логику старшинства для определения контекста:

Имя переменной шаблона.
Имя в контексте директивы.
Имена членов компонента.

Чтобы переменные не затеняли переменные в другом контексте, сохраняйте уникальность имен переменных. В следующем примере шаблон AppComponent приветствует клиента, Падму.

Затем ngFor перечисляет каждого клиента в массиве customers.

@Component({
    template: `
        <div>
            <!-- Hello, Padma -->
            <h1>Hello, {{ customer }}</h1>
            <ul>
                <!-- Ebony and Chiho in a list-->
                <li *ngFor="let customer of customers">
                    {{ customer.value }}
                </li>
            </ul>
        </div>
    `,
})
class AppComponent {
    customers = [{ value: 'Ebony' }, { value: 'Chiho' }];
    customer = 'Padma';
}

Клиент customer в ngFor находится в контексте <ng-template> и поэтому ссылается на клиента customer в массиве customers, в данном случае Ebony и Chiho. В этом списке нет Падмы, потому что customer вне ngFor находится в другом контексте.

И наоборот, customer в <h1> не включает Ebony или Chiho, потому что контекстом для этого customer является класс, а значением класса для customer является Padma.

Лучшие практики использования выражений¶

При использовании шаблонного выражения следуйте следующим рекомендациям:

Используйте короткие выражения.

Используйте имена свойств или вызовы методов, когда это возможно. Храните прикладную и бизнес-логику в компоненте, где она доступна для разработки и тестирования.

Быстрое выполнение.

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

Выражение должно завершаться быстро, чтобы обеспечить максимальную эффективность работы пользователя, особенно на медленных устройствах. Рассмотрите возможность кэширования значений, если их вычисление требует больших ресурсов.

Отсутствие видимых побочных эффектов¶

Согласно однонаправленной модели потока данных Angular, выражение шаблона не должно изменять состояние приложения, кроме значения целевого свойства. Чтение значения компонента не должно изменять какое-либо другое отображаемое значение. Представление должно быть стабильным в течение одного прохода рендеринга.

Идемпотентные выражения уменьшают побочные эффекты

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

Зависимые значения не должны меняться в течение одного оборота цикла событий. Если идемпотентное выражение возвращает строку или число, оно возвращает ту же строку или число, если вы вызываете его дважды подряд. Если выражение возвращает объект, включая массив, оно возвращает один и тот же объект ссылка, если вы вызываете его дважды подряд.

Что дальше¶

12.05.2022