[英]Nested Forms in Angular Material Stepper trigger a ExpressionChangedAfterItHasBeenCheckedError
[英]Nested Angular elements throwing ExpressionChangedAfterItHasBeenCheckedError
我已經對此問題進行了一些研究,但現在不確定它是錯誤還是我的實現出現問題。
我有一個使用服務來獲取一些數據的元素,然后將數據傳遞給子元素,但是當我更新數據時,我遇到了這個錯誤。
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)不這樣做
2)修改數據時,請使用changeDetectorRef.detectChanges()
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.