CdkDragDrop和ngTemplateOutlet

Question

我试图使用拖放功能与角材料7相关。

我使用ngTemplateOutlet将我的模板分割成可重用的部分，每个选项都可以是Thing™或嵌套的Thing™，后者有更多的子对象™。

嵌套的Things™显示为扩展面板。我希望所有一级Things™都可以重新排序，就像有一个列表一样。

(好的，好的，很明显，这是一个带有正常和嵌套选项的可重排序的sidenav，只是假装它不那么明显)

这是我最初写的代码。

<div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y">
  <ng-container *ngFor="let thing of things">
      <ng-container
        *ngTemplateOutlet="!thing.children ? singleThing : multipleThing; context: { $implicit: thing }"
      ></ng-container>
    </ng-container>
</div>

<ng-template #singleThing let-thing>
  <div cdkDrag>
    <ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: thing }"></ng-container>
  </div>
</ng-template>

<ng-template #multipleOption let-thing>
  <mat-expansion-panel cdkDrag (cdkDropListDropped)="dropItem($event)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <p>Nested thing title</p>
        <span cdkDragHandle></span>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <ng-container *ngFor="let childThing of thing.children">
      <div class="childThing">
        <ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: childThing }"></ng-container>
      </div>
    </ng-container>
  </mat-expansion-panel>
</ng-template>

<ng-template #thingTemplate let-thing>
  <p>I'm a thing!</p>
  <span cdkDragHandle></span>
</ng-template>

问题:单个Things™是可拖动的，但它们并不像cdkDropList应该做的那样强制执行，我可以将它们拖到任何地方。

不久前，当我尝试使用模板出口并将ng-template重新放入'HTML‘时，我遇到了一个类似的问题，所以我尝试了同样的方法。

<div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y">
  <ng-container *ngFor="let thing of things">
      <ng-container
        *ngIf="!thing.children; then singleThing; else multipleThing"
      ></ng-container>
        <ng-template #singleThing>
          <div cdkDrag>
            <ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: thing }"></ng-container>
          </div>
        </ng-template>

        <ng-template #multipleOption>
          <mat-expansion-panel cdkDrag (cdkDropListDropped)="dropItem($event)">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <p>Nested thing title</p>
                <span cdkDragHandle></span>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <ng-container *ngFor="let childThing of thing.children">
              <div class="childThing">
                <ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: childThing }"></ng-container>
              </div>
            </ng-container>
          </mat-expansion-panel>
        </ng-template>
    </ng-container>
</div>

<ng-template #thingTemplate let-thing>
  <p>I'm a thing!</p>
  <span cdkDragHandle></span>
</ng-template>

当然，为什么不呢？是的，好吧，但是为什么

变化不大，我们使用了一个ngIf，而不是第一个ngTemplateOutlet，并删除了Thing™的上下文绑定，因为现在由于共享范围，这两个模板都有其局部变量引用。

那么，为什么它在第二种方式而不是在第一种方式中起作用呢？

优点:它是否有可能使它保持第一个代码结构，在我看来，显然更可读性和干净？

Answer 1

我也有同样的问题，我甚至把它报告为关于GitHub的问题。

这是由于cdkDropList与cdkDrag的分离所致。cdkDrag必须在嵌套在带有cdkDropList的标签中，否则拖放元素将不会检测到拖放区域。

在您的情况下，解决方案将是在cdkDropList下面附加一个cdkDropList，并且只有在这种情况下，您才会使用ngTemplateOutlet调用模板。