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

28.02.2022

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1

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

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

1

@Input() childItem = '';

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

1

parentItem = 'lamp';

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

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

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

1

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

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

1

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

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

1
2
3
4

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

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

1
2
3
4
5
6

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

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

Комментарии