Question

属性指令：

<div myDirective>
     My content
    </div>

我想尽可能少地修改myDirective。

编辑：myDirective收听鼠标移动。我希望它在关闭时忽略鼠标移动。我希望不要使用在每次鼠标移动之前需要检查的输入布尔值。

编辑：这是我的指令代码。我只是试图找出是否可以在没有为Renderer事件添加大量if条件的情况下打开/关闭myDirective。 Hasn＆＃t; t Angular是一个简单的方法来打开/关闭指令，还是有人知道一个技巧？

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

@Directive({ selector: '[pan]' })
export class myDirective {
    private _clicking: boolean = false;
    private _previousX: number;
    private _previousY: number;

    constructor(private _el: ElementRef, private _renderer: Renderer) { }

    public ngOnInit(): void {
        this._renderer.listen(this._el.nativeElement, 'mousedown', (e: any) => {

            e.preventDefault();
            this._previousX = e.clientX;
            this._previousY = e.clientY;
            this._clicking = true;

        });



        this._renderer.listen(this._el.nativeElement, 'mouseup', (e:  any) => {

            this._clicking = false;

        });


        this._renderer.listen(this._el.nativeElement, 'mousemove',  (e: any) => {

            if (this._clicking) {
                e.preventDefault();
                let directionX: number = (this._previousX - e.clientX) > 0 ? 1 : -1;
                let directionY: number = (this._previousY - e.clientY) > 0 ? 1 : -1;
                this._el.nativeElement.scrollLeft += (this._previousX - e.clientX);
                this._el.nativeElement.scrollTop += (this._previousY - e.clientY);
                this._previousX = e.clientX;
                this._previousY = e.clientY;
            }


        });


        this._renderer.listen(this._el.nativeElement, 'mouseleave', (e: any) => {

            this._clicking = false;

        });

}



}

Answer 1

您只需将变量传递给指令即可。有关如何传入数据的示例，请参阅Angular 2 docs here。

<div [myDirective]="shouldShow">My Content</div>

如果指令应该执行，shouldShow是一个布尔值。

然后在您的指令中，您可以从[myDirective]读取数据。

@Input() myDirective: boolean;

这会修改myDirective，但也会移除使用*ngIf可能导致的模板重复。

Answer 2

<div *ngIf="show" myDirective>
     My content
</div>

在组件中：

show:boolean;

有了这个，如果你不感兴趣，你将跳过指令。如果没有，你可以做这样的事情：

<div >
    <div *ngIf="show" myDirective> </div>
     <span> My content </span>
</div>

Angular 2：打开/关闭指令的简便方法？

2 个答案: