是否可以將數據從一條指令傳遞到另一條指令？

Question

我已經創建了兩個指令。一個是處理Modal Popup的事件，另一個處理自定義的工具提示事件。現在我需要做的是將數據從Modal指令傳遞給工具提示指令。我試過谷歌，但沒有得到任何有用的東西。那麼，我們是否真的可以通過一個指令將值傳遞給另一個指令？

工具提示指令如下：

import { Directive, ElementRef, Input, HostListener, Renderer, ViewChild } from '@angular/core'; 
import { ReportModel } from '../../models/ReportModel'; 
//import {FormFieldModel } from '../../models/FormFieldModel'; 
import { FormFieldModel } from '../../models/FrameworkElementFormFieldModel'; 

@Directive( 
{ 
    selector: '[Tooltip]' 
} 
) 

export class TooltipDirective { 

constructor(public el: ElementRef, public renderer: Renderer) { } 
tooltipTitle: any = ''; 
tooltipText: any = ''; 
tooltipImage: any = ''; 
isFormFieldModel: boolean = false; 
@Input() dataContext: any = new ReportModel(); 
@Input() IsButtonPanel: boolean = false; 



private mouseTop: number = 0; 
private mouseLeft: number = 0; 
tooltipTop: number = 0; 
tooltipLeft: number = 0; 
@HostListener('click') onclick() { 
    this.hover(false); 
} 

@HostListener('mouseenter', ['$event']) onMouseEnter(event: MouseEvent) {debugger 
    this.hover(false); 
    if (this.mainDiv != null) { 
     this.mainDiv.remove(); 
     this.ImgElement.remove(); 
    } 
    this.mouseLeft = event.clientX; 
    this.mouseTop = event.clientY; 
    if (this.dataContext != null) { 

     this.tooltipText = this.dataContext.Description; 

     if (this.dataContext instanceof FormFieldModel) { 
      this.isFormFieldModel = true; 
     } 

     if (this.isFormFieldModel) { 
      if (!this.dataContext.IsShowToolTip) { 
       return; 
      } 
      this.tooltipTitle = this.dataContext.PrettyName; 
     } 
     else { 
      this.tooltipTitle = this.dataContext.Header; 
      this.tooltipImage = this.dataContext.Icon; 
     } 

     if (this.tooltipTitle == '' || this.tooltipTitle == null || this.tooltipTitle == 'null') { 
      this.tooltipTitle = "Header"; 
     } 

     if (this.tooltipText == null || this.tooltipText == 'null') { 
      this.tooltipText = ""; 
     } 

     if (this.tooltipImage == '' || this.tooltipImage == 'null') { 
      this.tooltipImage = "info.png"; 
     } 

     this.hover(true); 
    } 
} 
@HostListener('mouseleave') onMouseLeave() { 
    this.hover(false); 
} 

@HostListener('focusin') onFocus() { 

    if (this.mainDiv != null) { 
     this.mainDiv.remove(); 
     this.ImgElement.remove(); 
    } 

    this.mouseLeft = this.el.nativeElement.getBoundingClientRect().left; 
    this.mouseTop = this.el.nativeElement.getBoundingClientRect().top; 

    if (this.dataContext != null) { 

     this.tooltipText = this.dataContext.Description; 

     if (this.dataContext instanceof FormFieldModel) { 
      this.isFormFieldModel = true; 
     } 

     if (this.isFormFieldModel) { 
      if (!this.dataContext.IsShowToolTip) { 
       return; 
      } 
      this.tooltipTitle = this.dataContext.PrettyName; 
     } 
     else { 
      this.tooltipTitle = this.dataContext.Header; 
      this.tooltipImage = this.dataContext.Icon; 
     } 

     if (this.tooltipTitle == '' || this.tooltipTitle == null || this.tooltipTitle == 'null') { 
      this.tooltipTitle = "Header"; 
     } 

     if (this.tooltipText == null || this.tooltipText == 'null') { 
      this.tooltipText = ""; 
     } 

     if (this.tooltipImage == '' || this.tooltipImage == 'null') { 
      this.tooltipImage = "info.png"; 
     } 

     this.hover(true); 
    } 
} 

@HostListener('focusout') onFocusout(target) { 
    this.hover(false); 
} 

//@HostListener('document:mousemove', ['$event']) 
//onMouseMove(event: MouseEvent) { 
// this.mouseLeft = event.clientX; 
// this.mouseTop = event.clientY; 
//} 

mainDiv: any; ImgElement: any; InputElement: any; divElement: any; divElement1: any; divElement2: any; 
hover(onMouseHover: boolean) {debugger 

    if (onMouseHover && !this.IsButtonPanel) {debugger 
     //Dynamically Create Img Element 

     //Delete existing Tooltip 
     let tooltipItem = this.el.nativeElement.getElementsByClassName("tooltipMain")[0]; 
     if (tooltipItem != null) { 
      tooltipItem.outerHTML = ''; 
     } 
     else 
     { 
      tooltipItem = this.el.nativeElement.nextElementSibling; 
      if (tooltipItem != null && tooltipItem.className.indexOf("tooltipMain") >= 0) 
      { 
       tooltipItem.outerHTML = ''; 
      } 
     } 

     this.ImgElement = this.renderer.createElement(this.el.nativeElement, "img"); 

     this.renderer.setElementAttribute(this.ImgElement, "src", "images/" + this.tooltipImage); 

     //if (this.tooltipImage == '') { 
     // this.renderer.setElementAttribute(this.ImgElement, "src", "images/info.png"); 
     //} 
     //else { 
     // this.renderer.setElementAttribute(this.ImgElement, "src", "images/" + this.tooltipImage); 
     //} 

     this.renderer.setElementStyle(this.ImgElement, "width", "40px"); 
     this.renderer.setElementStyle(this.ImgElement, "height", "40px"); 
     this.renderer.setElementStyle(this.ImgElement, "margin-right", "2px"); 
     this.renderer.setElementStyle(this.ImgElement, "float", "left"); 
     this.renderer.setElementStyle(this.ImgElement, "border", "1px solid #CCC"); 
     this.renderer.setElementStyle(this.ImgElement, "border-radius", "5px"); 
     this.renderer.setElementStyle(this.ImgElement, "padding", "5px"); 
     this.renderer.setElementStyle(this.ImgElement, "backgroundColor", "#f5f5f5"); 

     //tooltip text outer div 

     this.divElement = this.renderer.createElement(this.el.nativeElement, "div"); 

     this.renderer.setElementStyle(this.divElement, "border", "1px solid #CCC"); 
     this.renderer.setElementStyle(this.divElement, "margin-left", "38px !important"); 
     this.renderer.setElementStyle(this.divElement, "color", "black"); 
     this.renderer.setElementStyle(this.divElement, "border-radius", "5px"); 
     this.renderer.setElementStyle(this.divElement, "padding", "5px"); 
     this.renderer.setElementStyle(this.divElement, "float", "left"); 
     this.renderer.setElementStyle(this.divElement, "backgroundColor", "#f5f5f5"); 
     this.renderer.setElementStyle(this.divElement, "text-align", "left !important"); 

     //tooltip text header div 

     this.divElement1 = this.renderer.createElement(this.el.nativeElement, "div"); 

     this.renderer.setElementClass(this.divElement1, "header", true); 
     this.renderer.createText(this.divElement1, this.tooltipTitle); 


     //tooltip text description div 

     this.divElement2 = this.renderer.createElement(this.el.nativeElement, "div"); 

     this.renderer.setElementClass(this.divElement2, "description", true); 
     this.renderer.createText(this.divElement2, this.tooltipText); 


     this.mainDiv = this.renderer.createElement(this.el.nativeElement, "div"); 

     this.renderer.setElementProperty(this.mainDiv, "disabled", true); 
     this.renderer.setElementClass(this.mainDiv, "tooltipMain", true); 


     let tooltipWidth = this.mainDiv.clientWidth + 10; 
     let tooltipHeight = this.mainDiv.clientHeight + 10; 

     let windowWidth = window.innerWidth; 
     let windowHeight = window.innerHeight; 

     if ((windowWidth - this.mouseLeft) < tooltipWidth) { 
      //this.tooltipLeft = windowWidth - (tooltipWidth); 
      this.renderer.setElementStyle(this.mainDiv, "right", "0px"); 
     } else { 
      //this.tooltipLeft = this.mouseLeft; 
      this.renderer.setElementStyle(this.mainDiv, "left", this.mouseLeft + "px"); 
     } 

     if ((windowHeight - this.mouseTop) < tooltipHeight) { 
      this.tooltipTop = this.mouseTop - 20; 
      this.renderer.setElementStyle(this.mainDiv, "bottom", "0px"); 
     } else { 
      this.renderer.setElementStyle(this.mainDiv, "top", this.mouseTop + 5 + "px"); 
     } 

     this.mainDiv.appendChild(this.ImgElement); 
     this.divElement.appendChild(this.divElement1); 
     this.divElement.appendChild(this.divElement2); 
     this.mainDiv.appendChild(this.divElement); 
     //this.renderer.setElementStyle(this.mainDiv, "left", this.tooltipLeft + "px"); 
     //this.renderer.setElementStyle(this.mainDiv, "top", this.tooltipTop + "px"); 
    } 
    else { 
     if (this.mainDiv != null) { 
      this.mainDiv.remove(); 
      this.ImgElement.remove(); 
     } 
    } 
} 
} 

我的彈出可拖動的指令如下：

import { Directive, Input, ElementRef, HostListener, Renderer, OnInit} from '@angular/core'; 

@Directive({ 
    selector: '[draggable-component]' 
}) 
export class DraggableDirective implements OnInit { 
topStart: number = 0; 
leftStart: number = 0; 
_allowDrag: boolean = true; 
valueTop: any = 0; 
valueLeft: any = 0; 
md: boolean; 

constructor(public element: ElementRef) { } 

ngOnInit() { 
    if (this._allowDrag) { 
     this.element.nativeElement.style.position = 'absolute'; 
    } 
} 

@HostListener('mousedown', ['$event']) 
onMouseDown(event: MouseEvent) { 
    if (event.button === 2) 
     return; // prevents right click drag, remove his if you don't want it 
    this.md = true; 
    this.topStart = event.clientY - this.element.nativeElement.style.top.replace('px', ''); 
    this.leftStart = event.clientX - this.element.nativeElement.style.left.replace('px', ''); 
} 

@HostListener('document:mouseup') 
onMouseUp(event: MouseEvent) { 
    this.md = false; 
} 

@HostListener('document:mousemove', ['$event']) 
onMouseMove(event: MouseEvent) { 
    if (this.md && this._allowDrag) { 

     this.valueTop = this.element.nativeElement.style.top = (event.clientY - this.topStart) + 'px'; 
     console.log(this.valueTop); 
     this.valueLeft = this.element.nativeElement.style.left = (event.clientX - this.leftStart) + 'px'; 
     console.log(this.valueLeft); 
    } 
} 

@HostListener('touchstart', ['$event']) 
onTouchStart(event: TouchEvent) { 
    this.md = true; 
    this.topStart = event.changedTouches[0].clientY - this.element.nativeElement.style.top.replace('px', ''); 
    this.leftStart = event.changedTouches[0].clientX - this.element.nativeElement.style.left.replace('px', ''); 
    event.stopPropagation(); 
} 

@HostListener('document:touchend') 
onTouchEnd() { 
    this.md = false; 
} 

@HostListener('document:touchmove', ['$event']) 
onTouchMove(event: TouchEvent) { 
    if (this.md && this._allowDrag) { 
     this.element.nativeElement.style.top = (event.changedTouches[0].clientY - this.topStart) + 'px'; 
     this.element.nativeElement.style.left = (event.changedTouches[0].clientX - this.leftStart) + 'px'; 
    } 
    event.stopPropagation(); 
} 
} 

現在我需要通過valueTop和valueLeft從可拖動的指令提示。這就是我想要的。

Answer 1

當你的指令是不相關的，你需要創建將在這兩個您的指令注入一個服務，該服務將是他們之間的溝通渠道：

@Injectable() 
export class Myservice{ 
    private _foo=new BehaviorSubject<string>("foo"); 
    setFoo(foo:string){ 
    this._foo.next(foo); 
    } 
    foo = this._foo.asObservable() 
} 

@Directive({ 
    selector: '[draggable-component]' 
}) 
export class DraggableDirective{ 
    constructor(public element: ElementRef, private service: MyService) { 
    this.service.setFoo("bar"); 
    } 
} 

@Directive( 
{ 
    selector: '[Tooltip]' 
}) 
export class TooltipDirective { 

    constructor(public el: ElementRef, public renderer: Renderer, private service:MyService) {} 

    ngOnInit(){ 
    this.service.foo.subscribe(value=>console.log(value)); 
    } 

} 

請注意，我使用的是BehaviorSubject，因爲您可能會遇到DraggableDirective在另一個訂閱它之前發出一個值，因此在正確的時間沒有得到正確的值。但是您完全免費實施，如果您認爲它更符合您的需求，您甚至可以使用不基於Observable/Subject的模式。