Вложенные угловые элементы, выбрасывающие ExpressionChangedAfterItHasBeenCheckedError - PullRequest
Новая
       5

Вложенные угловые элементы, выбрасывающие ExpressionChangedAfterItHasBeenCheckedError

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

Я провел некоторое исследование этой проблемы, но теперь я не уверен, что это ошибка или что-то не так с моей реализацией.

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

родительский элемент 

import { Component, OnInit, ViewEncapsulation} from '@angular/core';
import { TestService } from '../services/test.service';

@Component({
    selector: 'dm-element-with-service-test',
    templateUrl: './element-with-service-test.component.html',
    encapsulation: ViewEncapsulation.Emulated
})
export class ElementWithServiceTestComponent implements OnInit {
currentCount: number;

constructor(private testService: TestService) { }

    ngOnInit() {
        this.testService.count.subscribe(count => this.currentCount = count); 
    }

    count() {
        this.testService.addCount();
    }

}

представление родительского элемента 

<div>
    <button (click)="count()">count</button>
    <element-test [myNumber]="currentCount"></element-test>
</div>

дочерний элемент 

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

@Component({
    selector: 'dm-element-test',
    templateUrl: './element-test.component.html',
    encapsulation: ViewEncapsulation.Emulated
})
export class ElementTestComponent implements OnInit {
    @Input() myNumber: number;
    constructor() { }

    ngOnInit() {
    // do stuff...
    }
}

представление дочернего элемента 

<p>
    current number in this component: {{myNumber}}
</p>

модуль приложения 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { ElementTestComponent } from './element-test/element-test.component';
import { createCustomElement } from '@angular/elements';
import { ElementWithServiceTestComponent } from './element-with-service-test/element-with-service-test.component';


@NgModule({
    declarations: [
        AppComponent,
        ElementTestComponent,
        ElementWithServiceTestComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA ],
    entryComponents: [ElementTestComponent, ElementWithServiceTestComponent]
})
export class AppModule {
    constructor(private injector: Injector) {
        const el = createCustomElement(ElementTestComponent, { injector });
        const el2 = createCustomElement(ElementWithServiceTestComponent, { injector });
        customElements.define('element-test', el);
        customElements.define('element-with-service-test', el2);
    }
    ngDoBootstrap() { }
}

Индекс 

<div class="tests">
     <element-with-service-test></element-with-service-test>
</div>

Когда я загружаюприложение, все в порядке, но если я нажму кнопку подсчета, я получу эту ошибку.

1 Ответ

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

Эта ошибка всегда будет происходить при изменении данных, передаваемых от родителей в дочерних компонентах.Вы должны либо

1) не делать этого

2) использовать changeDetectorRef.detectChanges() при изменении данных.

https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

...