Пример кода с лучшими практиками привязки свойств Angular
Вот несколько рекомендаций по использованию привязки свойств в Angular:
Используйте синтаксис [property] для привязки свойств: Вместо использования синтаксиса bind-property используйте синтаксис [property] для привязки свойств. Это делает привязку более читаемой и согласованной с другим синтаксисом Angular.
<!-- Good -->
<input [value]="username">
<!-- Bad -->
<input bind-value="username">
Используйте директивы ngIf и ngFor для условного отображения элементов: Вместо использования привязки свойств для условного отображения или скрытия элементов используйте директивы ngIf и ngFor. Эти директивы специально разработаны для этой цели и могут повысить производительность приложения.
<!-- Good -->
<div *ngif="showErrorMessage">Error: {{errorMessage}}</div>
<!-- Bad -->
<div [hidden]="!showErrorMessage">Error: {{errorMessage}}</div>
Используйте одностороннюю привязку для свойств, доступных только для чтения: используйте одностороннюю привязку ([property]) для свойств, доступных только для чтения, и двустороннюю привязку ([(ngModel)]) для свойств, которые необходимо обновить из шаблона.
<!-- Good -->
<input [value]="username" disabled="">
<input [(ngmodel)]="username">
<!-- Bad -->
<input [(ngmodel)]="username" disabled="">
Используйте асинхронный канал для наблюдаемых: вместо того, чтобы вручную подписываться на наблюдаемые в компоненте и обновлять представление, используйте асинхронный канал. Асинхронный канал подписывается на наблюдаемый объект и автоматически обновляет представление.
<!-- Good -->
<div *ngif="user$ | async as user">
{{user.name}}
</div>
<!-- Bad -->
<div *ngif="user">
{{user.name}}
</div>
Используйте привязку свойств с осторожностью: привязка свойств может быть полезной, но она также может сделать код менее читаемым, затруднить отладку и вызвать проблемы с производительностью.
Стоит отметить, что чрезмерное использование привязки свойств может привести к жесткой связи между компонентом и шаблоном, что может затруднить тестирование и обслуживание компонента.
Рекомендуется разумно использовать привязку свойств и использовать другие функции Angular, такие как директивы, службы и перехватчики жизненного цикла компонента, для управления состоянием и поведением компонента.
Angular позволяет избежать побочных эффектов, пример кода
Вот пример того, как избежать побочных эффектов в компоненте Angular:
Изолируйте логику компонента: вместо того, чтобы напрямую манипулировать DOM или другими компонентами, используйте входные и выходные свойства компонента для связи с другими частями приложения. Это делает компонент более изолированным и его легче тестировать.
// Good
@Input() user: User;
// Bad
@ViewChild('usernameInput') input: ElementRef;
Избегайте изменения входных свойств: входные свойства следует рассматривать как неизменяемые. Избегайте изменения значений входных свойств внутри компонента. Это может вызвать неожиданное поведение и затруднить анализ компонента.
// Good
sortUsers(users: User[]) {
return users.sort((a, b) => a.name.localeCompare(b.name));
}
// Bad
@Input() users: User[];
sortUsers() {
this.users.sort((a, b) => a.name.localeCompare(b.name));
}
Избегайте подписки в конструкторе: рекомендуется избегать подписки на наблюдаемые объекты в конструкторе. Вместо этого используйте хук жизненного цикла ngOnInit и обязательно отмените подписку в хуке жизненного цикла ngOnDestroy.
// Good
export class ExampleComponent implements OnInit, OnDestroy {
Angular возвращает правильный тип, пример кода
Вот пример того, как вернуть правильный тип в сервисе Angular:
Используйте строго типизированный возвращаемый тип: Используйте строго типизированный возвращаемый тип для методов службы, чтобы гарантировать, что возвращается правильный тип.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) {}
getUser(): Observable<user> {
return this.http.get<user>('/api/user');
}
}
</user></user>В этом примере метод getUser имеет возвращаемый тип Observable, который гарантирует, что метод возвращает observable пользовательского типа.
Используйте вывод типа Typescript: если возвращаемый тип может быть выведен из реализации, Typescript автоматически определит возвращаемый тип, и вам не нужно явно указывать его.
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) {}
getUser() {
return this.http.get<user>('/api/user');
}
}
</user>В этом случае тип возвращаемого значения метода getUser — Observable, определяемый типом запроса http.get.
Используйте ключевое слово as: Если вы хотите привести возвращаемое значение к определенному типу, используйте ключевое слово as.
@Injectable({
providedРекомендации по привязке свойств Angular — пример передачи строки
Вот пример того, как использовать передовые методы связывания свойств при передаче строки:
Используйте одностороннюю привязку для свойств, доступных только для чтения: При передаче строки в качестве значения свойства используйте одностороннюю привязку ([property]), если значение доступно только для чтения.
<!-- Good -->
<app-child [title]="'My Title'"></app-child>
Используйте строковые литералы вместо переменных: При передаче строки в качестве значения свойства лучше всего использовать строковые литералы вместо переменных. Это делает привязку более читаемой и устраняет необходимость в ненужном состоянии компонента.
<!-- Good -->
<app-child [title]="'My Title'"></app-child>
<!-- Bad -->
<app-child [title]="title"></app-child>
Избегайте сложных выражений или вызовов функций. При передаче строки в качестве значения свойства избегайте использования сложных выражений или вызовов функций. Это может сделать привязку менее читаемой и трудной для отладки.
<!-- Good -->
<app-child [title]="'My Title'"></app-child>
<!-- Bad -->
<app-child [title]="getTitle()"></app-child>
Используйте привязку свойств с осторожностью: привязка свойств может быть полезной, но она также может сделать код менее читаемым, затруднить отладку и вызвать проблемы с производительностью. Поэтому рекомендуется разумно использовать привязку свойств и использовать другие функции Angular, такие как директивы, службы и перехватчики жизненного цикла компонента, для управления состоянием и поведением компонента.
Лучшие практики привязки свойств Angular – передача объекта, пример кода
Вот пример того, как использовать рекомендации по привязке свойств при передаче объекта:
Используйте одностороннюю привязку для свойств, доступных только для чтения: при передаче объекта в качестве значения свойства используйте одностороннюю привязку ([property]), если значение доступно только для чтения.
<!-- Good -->
<app-child [config]="{key: 'value'}"></app-child>
Используйте литералы объекта вместо переменных: при передаче объекта в качестве значения свойства лучше использовать литералы объекта вместо переменных. Это делает привязку более читаемой и устраняет необходимость в ненужном состоянии компонента.
<!-- Good -->
<app-child [config]="{key: 'value'}"></app-child>
<!-- Bad -->
<app-child [config]="config"></app-child>
Избегайте сложных выражений или вызовов функций: при передаче объекта в качестве значения свойства избегайте использования сложных выражений или вызовов функций. Это может сделать привязку менее читаемой и трудной для отладки.
<!-- Good -->
<app-child [config]="{key: 'value'}"></app-child>
<!-- Bad -->
<app-child [config]="getConfig()"></app-child>
Используйте привязку свойств с осторожностью: привязка свойств может быть полезной, но она также может сделать код менее читаемым, затруднить отладку и вызвать проблемы с производительностью. Поэтому рекомендуется разумно использовать привязку свойств и использовать другие функции Angular, такие как директивы, службы и перехватчики жизненного цикла компонента, для управления состоянием и поведением компонента.
Следуя этим рекомендациям, вы можете убедиться, что привязки свойств вашего компонента понятны, предсказуемы и просты в обслуживании.
Также стоит отметить, что при передаче сложных объектов в качестве свойств важно убедиться, что объекты неизменяемы, чтобы избежать неожиданного поведения и сделать компонент более понятным.
