-1

我有这段代码，我需要动态更改数据。所以我决定为此使用流。问题是它似乎在复制流，但它不起作用......有没有办法将它传递到那里？或者如果可能的话，也许还有其他解决方案？对于任何反馈，我们都表示感谢。

仓库堆栈组件.ts

import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { StackPalletsComponent } from '../modals/stack-pallets/stack-pallets.component';
import { MainServiceService } from '../services/main-service.service';
import { Observable, interval, BehaviorSubject, Subject } from 'rxjs';
import { Pallet } from '../models/pallet';

@Component({
  selector: 'app-warehouse-stack',
  templateUrl: './warehouse-stack.component.html',
  styleUrls: ['./warehouse-stack.component.css']
})
export class WarehouseStackComponent implements OnInit{

  @Input() warehouseStackID = null;
  @Input() name = null;
  @Input() position = null;
  @Input() set pallets(pallets:Pallet[]) {
    this.pallets$.next(pallets);
  }

  public pallets$:BehaviorSubject<Pallet[]> = new BehaviorSubject<Pallet[]>([]);
  
  public dialogRef: MatDialogRef<StackPalletsComponent>;


  constructor(public mainService:MainServiceService,public dialog:MatDialog) { }


  public dragging:boolean;


  
  ngOnInit(): void {

  }

  updatePosition(e: CdkDragEnd) {
    this.mainService.updateStackPosition(this.warehouseStackID, e.source.getFreeDragPosition().x, e.source.getFreeDragPosition().y)
  }

  public handleDragStart(event: CdkDragStart): void {
    this.dragging = true;
  }

  openDialog() {
    this.dialogRef = this.dialog.open(StackPalletsComponent, {
      data: {
        warehouseStackID: this.warehouseStackID,
        pallets$: this.pallets$
      } 
    });
  }

  handleClick(event: MouseEvent): void {
    if (this.dragging) {
      this.dragging = false;
      return
    } 
    this.openDialog();
  }
}

堆栈托盘组件.ts

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Pallet } from 'src/app/models/pallet';
import { MainServiceService } from 'src/app/services/main-service.service';
import { CreatePalletComponent } from '../create-pallet/create-pallet.component';

@Component({
  selector: 'app-stack-pallets',
  templateUrl: './stack-pallets.component.html',
  styleUrls: ['./stack-pallets.component.css']
})
export class StackPalletsComponent implements OnInit {

  constructor(public mainService:MainServiceService, public dialogRef:MatDialogRef<StackPalletsComponent>, public dialog:MatDialog,@Inject(MAT_DIALOG_DATA) public data: {warehouseStackID: number, pallets$:any}) { }

  ngOnInit(): void {
  }

  showCreationModal() {
    this.dialog.open(CreatePalletComponent, {
      data: {
        isStackPallet: true,
        warehouseStackID: this.data.warehouseStackID
      }
    })
  }
}

堆栈托盘组件.html

<div class="pallets">
    <app-pallet *ngFor="let pallet of this.data.pallets$|async" [position]="{x:pallet.positionX, y:pallet.positionY}" [pallet]="pallet"></app-pallet>
    <div class="cubeRow">
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
    <div class="cubeRow">
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
    <div class="cubeRow">
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
    <div class="buttons">
        <button class="btn-floating btn-large waves-effect waves-light red" style="margin-top: 5px;" (click)="showCreationModal()"><i class="material-icons">add</i></button>
    </div>
</div>
4

1 回答 1

0

应该从共享服务而不是组件访问流。原因通常是因为您会遇到周期性导入。无需将流注入下一个组件，只需从该组件订阅服务中的流即可。您可以pallets$.next(pallets)从在其构造函数中注入服务的任何组件中使用。然后只需将该服务注入您想要的任何组件，并订阅它。

对于内存管理，取消订阅很重要。我喜欢为此使用助手（UntilDestroy）；它将保留订阅直到组件被销毁。

这是一种方法。

仓库-stack.component.ts

@UntilDestroy({ checkProperties: true })
@Component({
  selector: 'app-warehouse-stack',
  templateUrl: './warehouse-stack.component.html',
  styleUrls: ['./warehouse-stack.component.css']
})
export class WarehouseStackComponent implements OnInit, OnDestroy, OnChanges {
 @Input() set pallets(pallets:Pallet[]) {}
constructor(warehouseService: WarehouseService) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.pallets) {
      this.warehouseService.pallets$.next(changes.pallets.currentValue)
    }
  }

 openDialog() {
    this.dialogRef = this.dialog.open(StackPalletsComponent, {
      data: {
        warehouseStackID: this.warehouseStackID
      } 
    });
  }
}

ngOnDestroy() {}

仓库.service.ts

@Injectable({ providedIn: 'root' })
export class WarehouseService {
  pallets$: BehaviorSubject<Pallet[]> = new BehaviorSubject<Pallet[]>([])
}

stack-pallets.component.ts

@UntilDestroy({ checkProperties: true })
@Component({
  selector: 'app-stack-pallets',
  templateUrl: './stack-pallets.component.html',
  styleUrls: ['./stack-pallets.component.css']
})
export class StackPalletsComponent implements OnInit, OnDestroy {
 pallets: Pallet[] | []
 palletsSub$: Subscription | undefined
constructor(warehouseService: WarehouseService) { 
 this.palletsSub$ = warehouseSevice.pallets$.subscribe((pallets) => {
     this.pallets = pallets
   })
 }
}

ngOnDestroy() {}
于 2021-10-16T18:01:46.593 回答