Пройдите собеседование по Angular: Общие вопросы и ответы экспертов

Можете ли вы объяснить разницу между ngOnInit и конструктором в Angular?

Конструктор вызывается при первом создании компонента и используется для инициализации свойств и зависимостей. ngOnInit вызывается после инициализации компонента и установки его входных свойств. Он часто используется для выполнения дополнительной инициализации, требующей установки входных свойств.

Вот пример использования ngOnInit для выполнения дополнительной инициализации:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  @Input() user: User;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.fetchUserData(this.user.id).subscribe(userData => {
      // do something with the user data
    });
  }
}

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

2. Как бы вы оптимизировали производительность приложения Angular?

Существует несколько способов оптимизации производительности приложения Angular, например:

• Ленивая загрузка модулей для уменьшения времени начальной загрузки

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) }
];

• Использование trackBy для повышения производительности циклов ngFor

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>

trackByFn(index: number, item: any) {
  return item.id;
}

• Реализация стратегии обнаружения изменений OnPush для минимизации количества циклов обнаружения изменений

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>{{ message }}</p>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  message: string;
}

• Минимизация размера пакета приложения за счет удаления неиспользуемого кода и активов
• Реализация рендеринга на стороне сервера для улучшения времени начальной загрузки.

3. Каковы некоторые лучшие практики для разработки приложений Angular? Некоторые лучшие практики для разработки приложений Angular включают:

• Сохранять компоненты небольшими и сфокусированными на одной задаче.
• Использование методов реактивного программирования и наблюдаемых потоков данных
• Минимизация использования глобального состояния и побочных эффектов
• Использование инъекции зависимостей для управления зависимостями
• Написание модульных и сквозных тестов для обеспечения качества кода. Вот пример простого модульного теста для компонента:

4. Можете ли вы объяснить, как работает внедрение зависимостей в Angular?

Инъекция зависимостей в Angular - это паттерн, в котором зависимости компонента предоставляются ему из внешнего источника, а не создаются внутри самого компонента. Это делает компоненты более модульными и многократно используемыми, а также позволяет упростить тестирование и обслуживание. В Angular инжектор отвечает за предоставление зависимостей компонентам, сервисам и другим объектам.

5. Можете ли вы объяснить разницу между @Input и @Output в Angular?

@Input используется для передачи данных от родительского компонента к дочернему компоненту, а @Output - для передачи данных от дочернего компонента к родительскому. @Input определяется на дочернем компоненте, а @Output - на родительском.

6. Как бы вы реализовали аутентификацию и авторизацию в приложении Angular?

Аутентификация и авторизация могут быть реализованы в Angular с помощью таких методов, как JSON Web Tokens (JWT), OAuth2 и OpenID Connect. Процесс аутентификации включает в себя проверку личности пользователя и создание безопасной сессии, а авторизация включает в себя определение того, какие действия пользователю разрешено выполнять на основе его роли и разрешений.

7. Можете ли вы объяснить, как Angular обрабатывает ошибки?

Angular предоставляет несколько механизмов для обработки ошибок, например:

• использование блоков try/catch для перехвата и обработки синхронных ошибок
• Использование операторов RxJS для обработки асинхронных ошибок
• использование класса ErrorHandler для обработки не пойманных ошибок и отображения удобного для пользователя сообщения об ошибке.

8. Каковы некоторые общие узкие места производительности в приложениях Angular?

Некоторые общие узкие места в производительности приложений Angular включают:

• Чрезмерные циклы обнаружения изменений
• Большие и сложные компоненты
• Чрезмерное манипулирование DOM
• Чрезмерное использование HTTP-запросов
• Медленное время отклика сервера.