问题描述
我正在尝试在没有 jquery 的情况下使用 Gridstack。它有效 - 但并不完美。我的问题是,小部件出了问题 - 它不是 11 个单个小部件,而是一个大元素。
我是一个绝对的初学者,所以我希望你明白我所做的,因为我不;)
我遵循了本教程 https://blexin.com/en/blog-en/angular-advanced-components-how-to-create-a-dashboard/
dashboard.ts
export class DashboardComponent implements OnInit,AfterViewChecked {
@ViewChild('gridStackContainer',{static: false}) gridStackContainer: ElementRef;
@input() public widgets: Widget[];
public ngAfterViewChecked(): void {
console.log('ngAfterViewChecked');
//this.gridStackContainer.nativeElement = this.widgets;
if (this.gridStackContainer) {
this.gridStackContainer.nativeElement = this.widgets;
//this.gridStackContainer.nativeElement.gridstack();
}
}
public ngOnInit(): void {
GridStack.init();
}
public ngOnChanges(changes: SimpleChanges): void {
if (this.gridStackContainer) {
this.gridStackContainer.nativeElement = this.widgets;
GridStack.init();
}
}
}
dashboard.html
<div #gridStackContainer class="grid-stack">
<div class="grid-stack-item">
<ng-container *ngFor="let widget of widgets">
<app-widget [positionX]="widget.positionX" [positionY]="widget.positionY" [width]="widget.width"
[height]="widget.height">
<span>{{ widget.content }}</span>
</app-widget>
</ng-container>
</div>
</div>
widget.ts
export class WidgetComponent implements OnInit {
@HostBinding('class')
gridClass = 'grid-stack-item';
@HostBinding('attr.data-gs-x')
@input()
public positionX: number;
@HostBinding('attr.data-gs-y')
@input()
public positionY: number;
@HostBinding('attr.data-gs-width')
@input()
public width: number;
@HostBinding('attr.data-gs-height')
@input()
public height: number;
constructor() { }
ngOnInit() {
}
}
widget.html
<div class="grid-stack-item-content">
<ng-content></ng-content>
</div>
widget.service.ts
@Injectable({ providedIn: 'root' })
export class WidgetService {
protected _widgets$: Subject<Array<Widget>> = new Subject<Array<Widget>>();
public widgets$: Observable<Array<Widget>> = this._widgets$.asObservable();
public loadWidgets(): void {
setTimeout(()=> {
this._widgets$.next([
{ positionX: 0,positionY: 0,width: 4,height: 2,content: 'Widget 1' },{ positionX: 4,height: 4,content: 'Widget 2' },{ positionX: 8,width: 2,content: 'Widget 3' },{ positionX: 10,content: 'Widget 4' },{ positionX: 0,positionY: 2,content: 'Widget 5' },{ positionX: 2,content: 'Widget 6' },content: 'Widget 7' },positionY: 4,content: 'Widget 8' },content: 'Widget 9' },content: 'Widget 10' },content: 'Widget 11' },]);
},1000);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)