无法将 Input 属性绑定到指令答案

【问题标题】：Cannot bind Input property to directive无法将 Input 属性绑定到指令
【发布时间】：2020-02-11 10:01:59
【问题描述】：

我想动态禁用来自某个 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)

【问题讨论】：

你能做一个stackblitz吗
我没有看到您的li 标签中提到的指令选择器eveDisableClickEvent。在@HostListener 装饰器之上声明@Input 装饰器也不会有什么坏处。

标签： angular angular-directive

【解决方案1】：

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

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

` 那应该有帮助。但是最好有一些带有用例的stackblitz。 P.s 问题是 @HostListener 需要处理函数，但在你的情况下编译器出现故障并遇到第一个布尔值的“disableClickEvent”属性，所以它会抛出“disableClickEvent 不是函数”的错误

【讨论】：

好吧，这可能有效，但 Angular 文档明确指出，可以简化传递参数：'
使用父组件的颜色突出显示
这很好，但是像这样同时应用指令并在相同的属性中设置颜色会很好。所以他们最终得到了这样的语法：'
Highlight me!
' 这正是我想要做的。
啊，我现在明白了：正如您和 Micheal 所指出的，这是因为指令成员声明格式错误。我必须将输入移到@Hostlistener 上方
@yBother 是的，没错，但要实现这一点，您必须拥有相同的 @Input 名称和选择器名称。所以你必须将@Input() disableClickEvent重命名为@Input() eveDisableClickEvent，然后你可以像<li [eveDisableClickEvent]="true">`一样使用它。但这是另一个问题。错误指出了我在回答中描述的情况:)
不要打扰'eveDisableClickEvent'这只是一个错字。我确保指令选择器和输入名称匹配。
@yBother 好吧。现在我明白了。