无法将输入属性绑定到指令

Question

我想动态地禁用来自某个DOM的点击事件。我认为指令应该可以解决问题。显然，不可能动态添加/删除指令，所以我只添加了条件参数：

从'@ angular / core'导入{指令，主机监听器，输入}；

@Directive({
    selector: '[eveDisableClickEvent]',
})
export class DisableClickEventDirective {
    @HostListener('click', ['$event'])
    // workaround as directives can not (yet) be added dynamically
    @Input()

    disableClickEvent: boolean;

    public onClick(event: any): void {
        if (this.disableClickEvent) {
            event.stopPropagation();
        }
    }
}

和我的html：

<div class="modal-body">
    <ng-container class="content" *ngIf="exportTypeSelectionModel$ | async; let exportTypeSelectionModel">
        <ul>
            <li              
                [disableClickEvent]="!exportTypeSelectionModel.Condition"
                [class.disabled]="!exportTypeSelectionModel.Condition"
            >                   
                <span>Some list item</span>
            </li>          
        </ul>
    </ng-container>
</div>

单击li时，我总是以这个结尾：

ng:///SharedModule/MyComponent.ngfactory.js:10 ERROR TypeError: jit_nodeValue_3(...).disableClickEvent is not a function
    at Object.eval [as handleEvent] (ng:///SharedModule/MyComponent.ngfactory.js:15)
    at handleEvent (:4200/vendor.js:98419)
    at callWithDebugContext (:4200/vendor.js:100038)
    at Object.debugHandleEvent [as handleEvent] (:4200/vendor.js:99673)
    at dispatchEvent (:4200/vendor.js:85506)
    at :4200/vendor.js:97351
    at HTMLLIElement.<anonymous> (:4200/vendor.js:117167)
    at ZoneDelegate.invokeTask (:4200/polyfills.js:3722)
    at Object.onInvokeTask (:4200/vendor.js:94422)

Answer 1

首先，您需要将指令附加到'li'。喜欢：<li eveDisableClickEvent [disableClickEvent]="!exportTypeSelectionModel.Condition" ... >。然后，在指令文件中，应将函数移到主机侦听器装饰器下。如：`

@HostListener('click', ['$event'])
onClick(event: any): void {
        if (this.disableClickEvent) {
            event.stopPropagation();
        }
    }

`那应该有帮助。但是最好是在用例中增加一些技巧。不幸的是，@ HostListener需要处理程序功能，但是在您的情况下，编译器关闭并遇到第一个为布尔值的“ disableClickEvent”属性，因此它引发错误，即“ disableClickEvent不是函数”]