Angular Droplists mit Snackbar

[_Phoenix_]

Hallo zusammen,
ich habe folgendes Grundproblem, ich habe eine eine cdk-drag-list im Hauptkomponenten des Tools und eine weitere in einem Komponennten der als Snackbar erscheint sobald ein Element aus der"Hauptliste gedragged wird.
Meine Idee war eigentlich die Liste des Snackbarcomponents in einem Service zu registrieren und den connectedTo paramater der Hauptliste danach auf den getter der snackbar zu setzen.

 

[efcoyote]

Find ich gut.
aka Was ist deine Frage?

 

[floq0r]

Da ist wohl etwas verloren gegangen:

Hallo zusammen,
ich habe folgendes Grundproblem, ich habe eine eine cdk-drag-list im Hauptkomponenten des Tools und eine weitere in einem Komponennten der als Snackbar erscheint sobald ein Element aus der"Hauptliste gedragged wird.
Meine Idee war eigentlich die Liste des Snackbarcomponents in einem Service zu registrieren und den connectedTo paramater der Hauptliste danach auf den getter der snackbar zu setzen.

Hauptkomponent.html:

<div class="project-time" cdkDropList (cdkDropListDropped)="drop($event)" #projectsList="cdkDropList" [cdkDropListConnectedTo]="[this._projectPlanningService.getDeleteArea()]">
    <app-trainee-project-time cdkDrag [cdkDragData]="traineeProject" [tpt]="traineeProject" (cdkDragDropped)="delete($event)" (cdkDragStarted)="showDeleteArea()">
    </app-trainee-project-time>
</div>

Hauptkomponent.ts:

@ViewChild('projectsList') projectsList: CdkDropList;
snackBar: MatSnackBarRef<TptDeleteAreaComponent>;


constructor(private _snackBar: MatSnackBar) {
}

delete($event: CdkDragDrop<any>) {
    this.snackBar.dismiss();
    this.traineeProject = null;
    console.log($event)
  }

  showDeleteArea() {
    this.snackBar = this._snackBar.openFromComponent(TptDeleteAreaComponent, {
      panelClass: ['delete-area']
    });

    this.snackBar.afterOpened().subscribe(() => {
      console.log(this.projectsList);
    });

Snackbar.html

<div id="deleteArea" cdkDropList (cdkDropListDropped)="dropped($event)" #deleteArea="cdkDropList">
    <mat-icon>delete</mat-icon>
  </div>

Snackbar.ts

@ViewChild('deleteArea') deleteArea: CdkDropList;

  constructor(private _projectPlanningService: ProjectPlanningService) {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this._projectPlanningService.setDeleteArea(this.deleteArea);
  }

  dropped($event) {
    console.log($event)
  }

service.ts:

deleteArea: CdkDropList;

  setDeleteArea(dropList: CdkDropList) {
    this.deleteArea = dropList;
  }

  getDeleteArea(): CdkDropList {
    return this.deleteArea;
  }

Was mache ich falsch?