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

target.component.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

好的，基本上，您可以通过为特定容器创建自定义指令来手动执行此操作。通过将事件类型设置为'drag'事件，此指令将包含 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>

ng2-dragula-拖放到iframe中

1 个答案: