Question

我目前正在尝试通过拖放选择的元素来实现ng-dragula

但是，动态组件加载失败，因为即使删除后ViewChild仍未定义。如果我理解得很好，那是由于原始js处理了drang'n'drop所致。

我能实现的最接近的操作是在dashboardIndex内创建ngIf并在放置更改时创建关联的布尔值，但这违背了创建同一组件的多个实例的目的。

有什么想法是可以实现的吗？

sidebar.component.html

<div class="bg-white py-2 collapse-inner rounded">
  <h6 class="collapse-header" >Reddit</h6>
    <div dragula="DRAGULA" id="from">
      <div class="collapse-item" id="oneId">One
         <div>
           <ng-template #communityContainer>
           </ng-template>
         <div>
      </div>
      <div class="collapse-item" id="reddit_whole">Two</div>
      <div class="collapse-item" id="specific_community">Three</div>
    </div></div>

dashboard-index.component.html

<div [className]="borderState ? 'row row-override drop-zone' : 'row row-override'" dragula="DRAGULA" id="to">
</div>

dashboard-index.component.ts

  subsription = new Subscription();
  dragulaGroup = 'DRAGULA';
  borderState = false;

@ViewChild('communityContainer', {read: ViewContainerRef, static: false}) viewContainerRefs;

  constructor(
    private router: Router,
    private dragulaService: DragulaService,
    private resolver: ComponentFactoryResolver,
    private ref: ChangeDetectorRef
  ) {

    dragulaService.createGroup(this.dragulaGroup, {
      revertOnSpill: true,
      copy: (el, source) => {
        return source.id === 'from';
      },
      accepts: (el, target, source, sibling) => {
        return target.id !== 'left';
      }
    });
    this.subsription.add(
      this.dragulaService.drop(this.dragulaGroup)
        .subscribe(({name, el, target, source, sibling}) => {
          this.onDrop({name, el, target, source, sibling});
        })
    );
  }

  ngOnInit() {
  }

  onDrop(args) {
    this.ref.detectChanges();
    this.viewContainerRefs.clear();
    const factory = this.resolver.resolveComponentFactory(CommunityComponent);
    this.viewContainerRefs.createComponent(factory);
  }

community.component.html

  <div class="card shadow mb-4">
    <div class="card-body">
    </div>
  </div>

community.component.ts

export class CommunityComponent implements OnInit {

  @Input() parent: any;
  constructor(
  ) { }

  ngOnInit() {
  }

}

角动分量载荷和Ng-Dragula

0 个答案: