要解决"Angular Gridster2模型更新后组件不刷新"的问题,可以尝试以下方法:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-gridster',
template: `
`
})
export class GridsterComponent {
gridsterOptions: GridsterConfig;
gridsterItems: GridsterItem[];
constructor(private cdr: ChangeDetectorRef) {}
updateGridster() {
// 更新gridsterItems数据
this.gridsterItems = updatedItems;
// 手动触发变更检测
this.cdr.detectChanges();
}
}
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
@Component({
selector: 'app-gridster',
template: `
`
})
export class GridsterComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) {}
updateGridster() {
// 清空容器
this.container.clear();
// 创建新组件实例
const factory = this.resolver.resolveComponentFactory(GridsterComponent);
const componentRef = this.container.createComponent(factory);
// 更新数据
componentRef.instance.gridsterItems = updatedItems;
}
}
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-gridster',
template: `
`
})
export class GridsterComponent {
gridsterOptions: GridsterConfig;
gridsterItems$: Observable;
updateGridster() {
// 更新gridsterItems数据
this.gridsterItems$ = updatedItems$;
}
}
请根据你的具体情况选择适合的解决方法。