Question

我想写一个属性指令，应用于element将禁用其中的所有输入和按钮，因此表单将变为只读。我现在的解决方案看起来像这样（仅适用于按钮，但它对锚点和输入很简单）：

@Directive(
    {
        selector: '[read-only]'
    }
)
export class ReadOnlyDirective implements AfterViewInit, OnDestroy {
    private currentElement: ElementRef;

    constructor(private element: ElementRef, private renderer: Renderer) {
        this.currentElement = element;
    }

    ngAfterViewInit(): void {
        let elements = this.element.nativeElement.getElementsByTagName('button');
        let elementsArray = Array.prototype.slice.call(elements);
        elementsArray.forEach(element => this.renderer.setElementAttribute(element, 'disabled', 'disabled'));
    }
}

正如您所看到的，我使用普通的javascript来查找元素，但使用渲染器来设置它们的属性。

我有两个问题：

有没有更好，更清晰的Angular2方式来做这个而不用普通的javascript查找元素？
有没有办法在前端使这个安全，以确保用户不启用该按钮并单击它？我想到了将删除按钮并在那里放置虚拟的结构指令，但我不知道什么是正确的方法。

用于禁用所有按钮和输入的Angular2指令

0 个答案: