Навигация сработала за пределами угловой зоны, вы забыли вызвать ngZone.run ()? - PullRequest
Новая
       51

Навигация сработала за пределами угловой зоны, вы забыли вызвать ngZone.run ()?

0 голосов
/ 06 декабря 2018

Я использую Angular 7 и сталкиваюсь с проблемой => после входа в систему, API GET успешно вызывает, и компонент тоже получает данные, но пользовательский интерфейс не отображает эти данные.

Когда я открываю консоль браузера, данные сразу заполняются в пользовательском интерфейсе, и в консоли отображается предупреждение.

"core.js: 15686 Навигация сработала за пределами угловой зоны, вы забыли вызвать 'ngZone.run ()'?"

Я гуглил это предупреждение инашел какой-то обходной путь, например this.ngZone.run(), и вызвал мой API внутри него.

Но проблема в том, что я использую более 40 компонентов и вызываю так много API в каждом компоненте.Поэтому я должен вызывать ngZone.run() при каждом вызове API, что кажется трудным для выполнения.

Пожалуйста, предложите мне лучший подход для преодоления этой проблемы.Заранее спасибо.

app.component.ts 

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}

app.service.ts 

@Injectable()
export class EmployeeService {
    constructor(private httpClient: HttpClient) { }

    getEmployees() {
        return this.httpClient.get<EmployeeModel[]>('employees');
    }

Ответы [ 3 ]

0 голосов
/ 21 марта 2019

Если я говорю сверху, то значение этого предупреждения заключается в том, что событие инициируется за пределами зоны, т. Е. Если вы знаете о зонах или , также называемых контекстом выполнения , для которого используется угловой обнаружение изменений и визуализация интерфейса .так что, хотя navigation ожидается, что угловая будет отображать пользовательский интерфейс, но здесь не происходит, это проблема, с которой вы сталкиваетесь.поэтому он выдает это предупреждение, потому что угловой процесс обрабатывает обнаружение изменений и рендеринг пользовательского интерфейса, когда исполняемый код находится внутри угловой зоны.

Но на самом деле это предупреждение появляется, когда вы пытаетесь вызвать маршрутизатор Navigation в подписке метод.

Положите маршрутизатор навигации вызов вне метода подписки, и он не выдаст это предупреждение снова.и вы увидите ожидаемый интерфейс после навигации.

для получения дополнительной информации о зонах прочитайте и просмотрите упомянутое ниже видео: -

https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html#running-outside-angulars-zone

https://www.youtube.com/watch?v=3IqtmUscE_U&t=150

0 голосов
/ 17 апреля 2019

Это происходит, если вы пытаетесь внедрить пользовательский сервис: 

constructor(private myService: MyService) {
}

, в то время как вы забыли предоставить его в конфигурации модуля: 

@NgModule({
  providers: [
    MyService
  ]
0 голосов
/ 10 марта 2019

Обычно это происходит, когда вы оборачиваете угловые вызовы внутри некоторого внешнего js-обратного вызова из внешнего JavaScript, не связанного с угловым кодом.

Пример app.component.ts: 

callMyCustomJsLibrary() {
  googleSdk.getLocations(location => this.getEmployees());
}

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}

В этом случаевам нужно будет включить вызов в NgZone, например: this.ngZone.run(() => this.getEmployees());

app.component.ts будет выглядеть следующим образом: 

callMyCustomJsLibrary() {
  googleSdk.getLocations(location => this.ngZone.run(() => this.getEmployees()));
}

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}
...