Угловая динамическая составляющая нагрузки и Нг-Драгула - PullRequest
Новая
       29

Угловая динамическая составляющая нагрузки и Нг-Драгула

0 голосов
/ 03 ноября 2019

В настоящее время я пытаюсь реализовать ng-dragula с преобразованием выбранного элемента при отбрасывании

Однако динамическая загрузка компонента завершается неудачно, поскольку ViewChild не определен даже после удаления. Если я хорошо это понял, то это из-за ванильной обработки js drang'n'drop.

Самое близкое, чего я мог бы достичь, - это создать ngIf внутри dashboardIndex и связанных с логическим изменением при падении изменений, но это побеждаетЦель создания нескольких экземпляров одного и того же компонента.

Любые идеи, как это достижимо?

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() {
  }

}
...