ng2-dragula - 拖放到 iframe

Question

我正在使用ng2-dragula為我的應用程序創建拖放界面。

每當用戶將項目拖入 iframe 時，我都會觸發警報。 但我不知道該怎么做。

目前，被拖動的項目只是在中途凍結，但是我希望有一個警報，然后以某種方式填充 iframe。

我該怎么做呢？

iframe.component.ts

import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ComponentFactoryResolver,
  ElementRef,
  HostListener,
  OnInit,
  ViewChild,
  ViewContainerRef
} from "@angular/core";
import { TargetComponent } from './target.component';

@Component({
  selector: "app-iframe",
  templateUrl: "./iframe.component.html",
  changeDetection: ChangeDetectionStrategy.Default
})
export class IframeComponent implements OnInit, AfterViewInit {
  document: any;
  componentReference: any;
  @ViewChild("iframe", { static: false }) iframe: ElementRef;

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit() {}

  ngAfterViewInit() {
    this.document =
      this.iframe.nativeElement.contentDocument ||
      this.iframe.nativeElement.contentWindow;
    this.loadIframeJs(
      this.document,
      "https://code.jquery.com/jquery-3.3.1.slim.min.js"
    );
    this.loadIframeJs(
      this.document,
      "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    );
    this.loadIframeJs(
      this.document,
      "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    );
    this.loadIframeJs(this.document, "iframe.js");
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TargetComponent);
    this.componentReference = this.viewContainerRef.createComponent(componentFactory);
    this.componentReference.changeDetectorRef.detectChanges();
    this.document.body.appendChild(this.componentReference.location.nativeElement);
  }

  loadIframeCss(document: any, href) {
    let css = document.createElement("link");
    css.href = href;
    css.rel = "stylesheet";
    css.type = "text/css";
    document.head.appendChild(css);
  }

  loadIframeJs(document: any, src) {
    let js = document.createElement("script");
    js.src = src;
    document.head.appendChild(js);
  }
}

source.component.ts

import { Component, OnInit } from "@angular/core";
import { DragulaService } from "ng2-dragula";

@Component({
  selector: "app-source",
  templateUrl: "source.component.html"
})
export class SourceComponent implements OnInit {
  webComponents = ["Navbar", "Hero", "Features"];
  ngOnInit() {}
}

目標組件.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-target",
  templateUrl: "./target.component.html"
})
export class TargetComponent {}

工作演示： https://stackblitz.com/edit/angular-gxnaha

Answer 1

好的，基本上您可以通過為特定容器創建自定義指令來手動執行此操作。 通過將事件類型設置為“拖動”事件，該指令將包含一個“像事件偵聽器”的HostListener ，並且在主機偵聽器內部，您需要使用EventEmitter在指令之外發出事件。

在 drag.directive.ts

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '[drag]'
})
export class dragDirective {
@Output() dragFlag = new EventEmitter<boolean>();
   @HostListener('dragover',['$event'])
    onDragOver($event) {
      $event.preventDefault();
      this.ImageDrop.emit();
    }
}

在 Html 部分

<span class="header"
drag
(dragFlag)="alertFunction($event)">
</span>