Question

如何从另一个组件监听(cdkDropListDropped)="drop($event)"？

我的ts：

drop(event: CdkDragDrop<ContractTemplate[]>) {
    // console.log(event);
    if (event.previousContainer === event.container) {
      // console.log(event.container.data);
      // moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      return;
    }

    copyArrayItem(event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex);
    this.currentTemplate = event.container.data[event.currentIndex];
    if (this.currentTemplate) {
      this.changeTab();
    }
    this.contractForm.setValue({name: this.currentTemplate.name});
    console.log(this.currentTemplate);
    this.currentTemplateClause = [];
    this.currentTemplate.clauses.forEach(templateClause => {
      const clause = templateClause.clause;
      this.clauseService.getClause(clause.id).subscribe(foundClause => {
        // console.log(foundClause);
        const getPlaceholder = foundClause.text.match(/\[{(\w+)\}]/g);
        const inpuText = '<span class="field-to-fill">.............................................................................</span>';
        // getPlaceholder.forEach(value => {
        //   foundClause.text = foundClause.text.replace(value, inpuText) as string;
        //   const field2Fill = document.getElementsByClassName('field-to-fill') as HTMLCollectionOf<HTMLElement>;
        //   for (let i = 0; i < field2Fill.length; i++) {
        //     if (field2Fill.length !== 0) {
        //       field2Fill[i].style.width = '300px';
        //       field2Fill[i].style.display = 'inline-block';
        //       field2Fill[i].style.textAlign = 'center';
        //     }
        //   }
        // });
        // console.log(JSON.stringify(foundClause.model, null, 2));
        this.currentTemplateClause.push(foundClause);
      });
    });

  }

我的html：

<div class="cover card"
         cdkDropList
         [cdkDropListData]="draggedTemplates"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListEnterPredicate]="enterPredicate"
         style="overflow: auto" >
            <div *ngIf="currentTemplate">
              <form [formGroup]="contractForm" (ngSubmit)="onSubmit()">
                <div class="card-content">
                  <div>
                  <mat-form-field id="name" label="Name">
                    <h3><input matInput type="text" formControlName="name" readonly [value]="currentTemplate.name"></h3>
                  </mat-form-field>
                  <span *ngIf="contractForm.get('name').hasError('required') && contractForm.get('name').touched" class='error' padding>Name is a required field.</span>
                  <div  *ngFor="let clause of currentTemplateClause;" [cdkDragDisabled]="true" cdkDrag>
                      <!-- <div>
                        <p class="lead-text mt-5" [innerHTML]=clause.text></p>
                        <mat-divider></mat-divider>
                      </div> -->
                      <div>
                        <app-contracts-dynamic-forms [form]="contractForm" [clause]="clause" [model]="clause.model"></app-contracts-dynamic-forms>
                        <mat-divider></mat-divider>
                      </div>
                  </div>
                  </div>
                </div>

              </form>
            </div>

      </div>

(cdkDropListDropped)="drop($event)"在console.log(this.currentTemplate);内部触发drop(event: CdkDragDrop<ContractTemplate[]>)。

我需要在其他组件中捕获该console.log吗？我怎么能达到我的目标？

谢谢。

Answer 1

编辑：好的，保留我以前的答复。首先，确定通信方向。

要监听的组件必须使用Eventemitter。

@Output() messageEmitter: EventEmitter<any> = new EventEmitter();

好的，我们已经有了坚实的基础！

所以我们必须在使用drop方法的组件中使用它...

drop(event) {
...
// You can emit whatever you want. Objects, simply strings... up to you
   this.messageEmitter.emit(...)
...
}

然后，在侦听组件的模板中看起来像这样...

<my-component (eventEmitter)="listen($event)"></my-component>

在组件的TS文件中，您实现了一个方法，该方法的名称可以像建议的那样...

listen(event) {
   console.log(event)
}

这样，您的父组件可以收听孩子一直在想什么！

我不知道您如何计划组件之间的交互，但是您可以创建一个在组件之间共享数据的服务。例如，在您的服务中，您可以...

  private _messageObservable$: Subject<any> = new Subject<any>();

  constructor() { }

  public get messageObservable(): Subject<any> {
    return this._messageObservable$;
  }

  sendNotification(item: any) {
    this._messageObservable$.next(item);
  }

然后，在您希望能够收听的组件中...

constructor(private service: NotificationService) {
 this.service.messageObservable().subscribe((value:any) => {
    // DO SOMETHING 
  })
}

在放置事件中，您可以使用该服务执行以下操作...

drop(event) {
..
this.service.sendNotification(item:any);
..
}

如果组件没有父/子关系，这就是我启用组件交互的方式

Answer 2

只是要确认您尝试访问的组件是否具有父/子关系？

如何在其他组件中侦听（cdkDropListDropped）=“ drop（$ event）”？

2 个答案: