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

28.02.2022

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

Смотрите код для рабочего примера, содержащего фрагменты кода из этого руководства.

Избегайте побочных эффектов

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

В целом, правильный синтаксис не позволяет присваивать значение чему-либо в выражении привязки свойств.

Синтаксис также не позволяет использовать операторы инкремента и декремента.

Пример возникновения побочных эффектов

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

Если Angular обнаружит изменение, он выдаст ошибку.

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

Возвращайте правильный тип

Выражение шаблона должно возвращать значение того типа, которое ожидает целевое свойство. Например, return:

• a string, если целевое свойство ожидает строку

• number, если ожидается число

• object, если ожидается объект.

Передача строки

В следующем примере свойство childItem компонента ItemDetailComponent ожидает строку.

<app-item-detail [childItem]="parentItem"></app-item-detail>

Подтвердите это ожидание, посмотрев в ItemDetailComponent, где тип @Input() является string:

@Input() childItem = '';

parentItem в AppComponent является строкой, что означает, что выражение parentItem в [childItem]="parentItem", оценивается как строка.

parentItem = 'lamp';

Если бы parentItem был каким-то другим типом, вам нужно было бы указать childItem @Input() как этот тип.

Передача объекта

В этом примере ItemListComponent является дочерним компонентом AppComponent и свойство items ожидает массив объектов.

<app-item-list [items]="currentItems"></app-item-list>

В ItemListComponent @Input(), items, имеет тип Item[].

@Input() items: Item[] = [];

Обратите внимание, что Item является объектом и имеет два свойства, id и name.

export interface Item {
    id: number;
    name: string;
}

В app.component.ts, currentItems — это массив объектов в той же форме, что и объект Item в items.ts, с id и name.

currentItems = [
    {
        id: 21,
        name: 'phone',
    },
];

Предоставляя объект в той же форме, вы удовлетворяете ожиданиям items, когда Angular оценивает выражение currentItems.

Комментарии