«Если отладка — это процесс устранения ошибок в программном обеспечении, то программирование должно быть процессом их добавления».

- Эдсгер В. Дейкстра

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

Новый Angular 9 улучшает способ отладки и взаимодействия с компонентами в режиме разработки. С этим обновлением вы сможете:

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

Эти возможности возможны с глобально открытым объектом ng в консоли разработчика браузера.

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

В этом блоге мы рассмотрим некоторые часто используемые параметры отладки, доступные по умолчанию в приложении Angular 9 CLI.

Давайте погрузимся!

Получение глобального экземпляра Angular

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

  • Выполните следующую команду, чтобы запустить приложение локально по адресу http://localhost:4200/:
ng serve --open
  • Откройте консоль разработчика браузера или нажмите F12.
  • На вкладке Консоль введите и нажмите Enter. Все функции по умолчанию глобального объекта ng будут перечислены, как показано на следующем снимке экрана.

Вы можете играть с компонентами Angular, используя открытые функции. Теперь давайте посмотрим на это в действии с приложением Angular CLI по умолчанию.

Получение экземпляра компонента Angular

Метод ng.getComponent используется для получения экземпляра компонента, связанного с данным элементом DOM. Выполните следующие шаги, чтобы получить базовый компонент Angular:

  1. Откройте консоль разработчика и перейдите на вкладку Элементы.
  2. Выберите элемент ‹app-root›, который будет отображать переменную $0 в консоли JavaScript.
  3. Теперь напишите следующую строку кода в консоли JavaScript:
ng.getComponent($0)

Теперь вы можете увидеть волшебство, как показано на следующем GIF.

Взаимодействие с компонентом Angular

Теперь доступен экземпляр компонента ‹app-root Angular вместе со всеми переменными, методами и внедренными службами, включая частные методы и переменные.

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

ng.getComponent($0).title = "Custom Title"

К сожалению, никаких изменений в пользовательском интерфейсе не видно. Это потому, что мы не уведомили Angular об изменении названия компонента с JavaScript. Если мы не уведомим об изменениях в Angular, они не будут отражены в пользовательском интерфейсе.

Быстрое решение для преодоления этого — запустить обнаружение изменений Angular вручную. В Angular есть метод ng.applyChanges(component) для запуска обнаружения изменений.

ng.applyChanges($0)

Теперь вы увидите, что заголовок изменился на Пользовательский заголовок.

Аналогичным образом вы можете вызвать любой метод, представленный в объекте ng. Все доступные функции в объекте ng перечислены в таблице ниже, воспроизведенной из документации Angular по адресу https://angular.io/api/core/global. Вы можете обратиться к этой документации для получения дополнительной информации.

ng.applyChanges: помечает компонент для проверки (в случае компонентов OnPush) и синхронно выполняет обнаружение изменений в приложении, которому принадлежит этот компонент.

ng.getComponent: извлекает экземпляр компонента, связанный с данным элементом DOM.

ng.getContext: внутри встроенного представления (например, * ngIf или * ngFor) извлекает контекст встроенного представления, частью которого является элемент. В противном случае извлекается экземпляр компонента, представление которого владеет элементом (в этом случае результат такой же, как при вызове getOwningComponent).

ng.getDirectives: извлекает экземпляры директив, связанные с данным элементом DOM. Не включает экземпляры компонентов.

ng.getHostElement: извлекает элемент хоста компонента или экземпляра директивы. Элемент host — это элемент DOM, соответствующий селектору директивы.

ng.getInjector: извлекает Инжектор, связанный с элементом, компонентом или экземпляром директивы.

ng.getListeners: извлекает список прослушивателей событий, связанных с элементом DOM. Список включает прослушиватели хоста, но не включает прослушиватели событий, определенные вне контекста Angular (например, через addEventListener).

ng.getOwningComponent: извлекает экземпляр компонента, представление которого содержит элемент DOM.

ng.getRootComponents: извлекает все корневые компоненты, связанные с элементом DOM, директивой или экземпляром компонента. Корневые компоненты — это те, которые были загружены Angular.

Взаимодействие с компонентом Syncfusion Angular

В этом разделе мы собираемся интегрировать компонент Syncfusion DatePicker Angular с приложением Angular CLI и взаимодействовать с ним.

Примечание. Для простоты используйте следующий код в файле app.component.ts:

[app.component.ts]

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-debugging';
date: Date = new Date();
}

[app.component.html]
Включите следующий код рядом с выделенным разделом карточки.

<!-- Highlight Card -->
<div class="card highlight-card card-small">
-------
-------
-------
</div>
<ejs-datepicker [value]='date' placeholder='Enter date'></ejs-datepicker>
  • Теперь Angular CLI будет выглядеть следующим образом.

  • Теперь откройте компонент DatePicker и измените значение date с помощью элемента ‹app-root› в консоли разработчика. Следующий пример кода делает это:
ng.getComponent($0).date = new Date("1/1/2021")
ng.applyChanges($0)

Примечание. Не забудьте вызвать метод ng.applyChanges(component), чтобы увидеть изменения в пользовательском интерфейсе.

Вывод

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

Бонусный раунд!

Вниманию разработчиков Angular: Syncfusion предлагает более 65 высокопроизводительных, легких, модульных и отзывчивых компонентов Angular для ускорения разработки.

Для существующих клиентов последняя версия наших элементов управления доступна для загрузки на странице Лицензии и загрузки. Если вы еще не являетесь клиентом, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы проверить все наши компоненты Angular, которые мы можем предложить. Вы также можете изучить образцы в нашем репозитории GitHub.

Первоначально опубликовано на https://www.syncfusion.com 22 апреля 2020 г.