I've done some research around this issue, now I'm not sure it's a bug or something wrong with my implementation.
I've got an element which uses a service to fetch some data, then it passes the data to a child element, but when I update the data, I've got that error.
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>
When I load the app, everything's fine, but if I click the count button I've got that error.
That error will always happen when you change data passed from parents in child components. You should either
1) not do that
2) use changeDetectorRef.detectChanges()
when you do modify data.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.