如何在没有 jquery 的情况下在 Angualr 中使用 Gridstack

如何解决如何在没有 jquery 的情况下在 Angualr 中使用 Gridstack

我正在尝试在没有 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);
  }
}