«Если отладка — это процесс устранения ошибок в программном обеспечении, то программирование должно быть процессом их добавления».
- Эдсгер В. Дейкстра
Последняя версия 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:
- Откройте консоль разработчика и перейдите на вкладку Элементы.
- Выберите элемент ‹app-root›, который будет отображать переменную $0 в консоли JavaScript.
- Теперь напишите следующую строку кода в консоли 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 и взаимодействовать с ним.
- Следуйте инструкциям в следующем руководстве пользователя, чтобы интегрировать компонент Syncfusion DatePicker Angular:
Начало работы с компонентом Syncfusion Angular DatePicker
Примечание. Для простоты используйте следующий код в файле 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 г.