После обновления моих проектов до Angular v9, пока я пытался отлаживать приложение с помощью ng.probe, я продолжал получать следующую ошибку
Я был сбит с толку и подумал, куда делось ng.probe?
Для тех, кто не знаком с ng.probe и работает над angular версиями ‹9, вот замечательная статья, которая это объясняет.
Мы собираемся сосредоточиться исключительно на v9 +, поскольку Ivy официально используется в качестве компилятора по умолчанию. И Айви представил несколько новых мощных API, которые помогают упростить отладку.
Новый Глобальный объект ng используется для отображения набора функций, которые помогают в отладке. Если вы наберете ng в консоли браузера, вы увидите различные доступные в нем методы.
Теперь давайте посмотрим на некоторые из них в действии.
В этом примере мы будем использовать простое приложение, состоящее из 2 компонентов. GreetingsComponent, который отображает Hi Abdu Manaz, вложен в AppComponent. Мы воспользуемся новым API отладки и изменим приветствие на Hello Abdu Manaz, используя методы отладки и без фактического изменения кода. Это простой вариант использования, но он поможет вам лучше понять отладку.
Прежде чем мы начнем, сделаем пару вещей. Когда вы проверяете элемент в Chrome, к нему можно получить доступ с помощью переменной $ 0 (как отмечено на скриншоте выше).
Итак, если вы наберете $ 0 в консоли, вы получите следующий результат:
У нас есть HTML-ссылка на элемент. Чтобы получить ссылку на компонент этого элемента, выполните в консоли команду ниже.
ng.getComponent($0);
ng - относится к глобальному объекту, предоставляющему функции отладки getComponent - используется для получения ссылки на компонент $0 - относится к элементу в DOM
Теперь у нас есть доступ к GreetingsComponent. Используя ссылку на компонент, мы можем вручную вызывать различные функции внутри компонента, а также обновлять его состояние. Давайте изменим значение переменной greetings на Hello Abdu Manaz, как показано ниже.
Мы можем сохранить ссылку на компонент в переменной component и использовать ее также для дальнейших действий. Здесь мы изменили переменную greeting на Hello Abdu Manaz.
Но подождите, ничего не изменилось. Это потому, что обнаружение изменений Angular не запущено, а внесенные нами изменения еще не приняты.
Таким образом, мы можем вручную запустить обнаружение изменений с помощью ng.applyChanges($0). Теперь вид будет обновлен.
Давайте посмотрим на некоторые другие полезные методы
ng.getOwningComponent - который вернет непосредственный родительский компонент выбранного элемента. В нашем примере GreetingsComponent вложен в AppComponent, поэтому метод возвращает ссылку на AppComponent.
ng.getDirectives - который вернет массив Директив, примененных к элементу. Поскольку мы не используем никаких директив в нашем примере приложения, оно вернет пустой массив.
ng.getListeners — вернет массив слушателей, прикрепленных к элементу. В нашем примере мы прикрепили click event к img element. Если мы выполним этот метод после выбора img element, мы получим следующий результат
Это некоторые из функций, которые помогают лучше отладить наше приложение angular.
Для получения дополнительной информации перейдите по адресу: https://angular.io/api/core/global
Также обратите внимание, что эти методы доступны только в режиме разработки и недоступны в режиме prod.
