傳遞元素引用指令

我想傳遞元素引用給指令。我知道，在其上的指令已經應用的元素的引用可以通過傳遞元素引用指令

private _elemRef: ElementRef

獲得，但我想通過參考其他元素的指令。任何幫助表示讚賞。

下面是演示代碼。我正在使用ripple指令。

<ul #other> 
    <li ripple>Hello</li> 
</ul>

directive.js

@Directive({ 
    selector: '[ripple]' 
}) 
export class RippleDirective { 
    constructor(private _elemRef: ElementRef) { 
    } 

    @HostListener('click', ['$event']) 
    public onClick(event: MouseEvent) { 
    // I wan't to refer the '#other' node here 
} 
}

來源

2016-08-08 ritz078

請添加更多的代碼，演示了你嘗試完成。什麼是「其他要素」和「指令」？ –

這是可能的。但是，我會擔心這個代碼設計的影響。如果你需要來自該元素的信息，你可以編寫一個函數，在當前組件中讀取它，並在'[bracket] =「func（）」'屬性中傳遞該信息。如果您想更改該元素，則可以在您的子組件上觀看事件。對於其他用途，專用標籤效果很好。 – Katana314

https://angular.io/docs/ts/latest/api/core/index/ViewChild-var.html –

您可以將模板變量#other傳遞到@Input()：

@Directive({ 
    selector: '[ripple]' 
}) 
export class RippleDirective { 
    @Input() ripple; 

    @HostListener('click', ['$event']) 
    public onClick(event: MouseEvent) { 
    this.ripple... 
    } 
}

<ul #other> 
    <li [ripple]="other">Hello</li> 
</ul>

來源

2016-08-09 09:55:57

它的工作原理。謝謝。 – ritz078

傳遞元素引用指令

回答

相關問題