Question

我有这个角度事件插件：（从there复制）

@Injectable()
    export class UndetectedEventPlugin {
    manager: EventManager;

    supports(eventName: string): boolean {
        return eventName.indexOf('undetected.') === 0;
    }

    addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
        const realEventName = eventName.slice(11);
        return this.manager.getZone().runOutsideAngular(() => this.manager.addEventListener(element, realEventName, handler));
    }
}

如果我将其添加到模块提供程序中，则它可以在应用程序中的任何地方完美运行：

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,... ],
  bootstrap:    [ AppComponent ],
  providers: [{
      provide: EVENT_MANAGER_PLUGINS,
      useClass: UndetectedEventPlugin,
      multi: true
  }]
})
export class AppModule {}

但是，相反，如果我将其添加到这样的特定组件提供程序中：

@Component({
  selector: 'hello',
  providers: [{
    provide: EVENT_MANAGER_PLUGINS,
    useClass: UndetectedEventPlugin,
    multi: true
  }],
  template: `<button (click)="test()">BTN 1: (click)="test()"</button><br><br>
             <button (undetected.click)="test()">BTN 1: (undetected.click)="test()"</button>`,
})
export class HelloComponent {
  test() {
    console.log('TEST FUNCTION')
  }
}

它不起作用。
看来整个应用程序必须是全局的，但我不确定。.

您知道将eventPlugin范围限制为组件的方法吗？

演示： https://stackblitz.com/edit/angular-jk4gpm?file=src%2Fapp%2Fhello.component.ts

Answer 1

EventManager是浏览器模块的一部分，它接收所有插件作为其构造函数依赖项的一部分。

/**
 * Initializes an instance of the event-manager service.
 */
constructor(plugins: EventManagerPlugin[], _zone: NgZone);

一旦创建了EventManager实例，便无法添加其他插件。

您不应使用提供程序依赖性来执行业务逻辑。如果要有条件地使用插件，请向插件添加逻辑。您可以将插件注入组件中，以根据组件的生命周期配置其工作方式。

Angular：如何仅在特定组件内部而不是整个ngModule中使用自定义EventPlugin？

1 个答案: