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

Question

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

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

    @Directive({
        selector: '[disableClickEvent]',
    })
    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();
        }
    }

` 那应该有帮助。但是最好有一些用例的堆栈闪电战。 P.s 问题是 @HostListener 需要处理函数，但在您的情况下，编译器出现故障并首先遇到布尔值 "disableClickEvent" 属性，因此它会抛出 "disableClickEvent is not a function"

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

Cannot bind Input property to directive

angular-directive

angular

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

Cannot bind Input property to directive

angular-directive

angular

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