相关疑难解决方法(0)

我正在开发一个Github回购,它遵循Angular(英雄之旅)的官方教程.您可以在此处查看所有代码:https: //github.com/Ismaestro/angular7-example-app

我的问题是,我在应用程序的主模块(app.module)中声明了一个指令,如果我在AppComponent中使用它,它运行良好(该指令只突出显示DOM元素内的文本).

但我在AppModule中有另一个名为HeroesModule的模块,在该模块的一个组件内,该指令不起作用.主要代码,这里:

应用程序/ app.module.ts

...

import { HighlightDirective } from "./shared/highlight.directive";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        CoreModule,
        HeroesModule
    ],
    declarations: [
        AppComponent,
        HeroTopComponent,
        HighlightDirective <-------
    ],
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ],
    bootstrap: [ AppComponent ]
})

...

应用程序/英雄/ heroes.module.ts

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroRoutingModule
    ],
    declarations: [
        HeroListComponent,
        HeroSearchComponent,
        HeroDetailComponent,
        HeroFormComponent
    ],
    providers: [
        HeroService
    ],
    exports: [
        HeroSearchComponent
    ]
})

应用程序/共享/ highlight.directive.ts

import { Directive, ElementRef, Input …

我有一个组件click.

<my-box (click)="openModal()"></my-box>

当我单击此元素时,openModal函数将运行.而且我想给出1000ms的节流时间以防止打开多个模态.

我的第一种方法是使用Subject(来自rxJs)

//html
<my-box (click)="someSubject$.next()"></my-box>
//ts
public someSubject$:Subject<any> = new Subject();
...etc subscribe

但我觉得它有点冗长.

Next Approach正在使用a directive.我修改了一些我通过谷歌搜索找到的代码.

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

@Directive({
    selector: '[noDoubleClick]'
})
export class PreventDoubleClickDirective {

    constructor() {
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.stopPropagation();    // not working as I expected.
        event.preventDefault();     // not working as I expected.

        event.srcElement.setAttribute('disabled', true);    // it won't be working unless the element is input.
        event.srcElement.setAttribute('style', 'pointer-events: none;');   // test if …