在扩展类时如何防止 @HostListeners 相互覆盖？

Question

我正在构建一个 class 来扩展我的所有组件来监听像这样的调整大小事件

@HostListener( 'window:resize', ['$event'] ).....//function

在其他组件中，我监听了相同的事件，当 class 扩展时，这会导致一个事件覆盖另一个事件，因此当 window 大小发生变化时，只有一个事件会触发。我发现这是问题所在，因为我有一个大 class 我取消评论以在一个地方修补所有内容。当我将其添加到 class

@HostListener( 'window:resize', ['$event'] ) reSize( event ){ this.calcScreen(); }
@HostListener( 'window:resize', ['$event'] ) reScale( event ){ this.checkScrn(); }

我得到一个错误，指出存在重复项，这解释了为什么它们在扩展时会相互覆盖。我给这些函数起了不同的名字，看看是否有帮助，我认为第二个名字占主导地位。但是只有一个 @HostListener 最后

reSize( event ){ this.calcScreen(); this.checkScrn(); }

他们都运行如愿。

我该如何解决这个问题？这是我目前的 classes。

AppComponent

export class AppComponent extends GridFactory implements OnInit {
    MainFrame: SiteFrame;

    @HostListener( 'window:resize', ['$event'] ) onResize( event ){ this.calcScreen(); }

    constructor( @Self() public appSpecs: ElementRef ){
        super( appSpecs );
    }

    ngOnInit(){ this.calcScreen(); }

    calcScreen(){ this.MainFrame = uiMonitor(); }
}

GridFactory

export class GridFactory implements AfterViewInit {
    ScreenCore   : ScrnCore  = new ScrnCore();
    GridSettings : GridSpecs = new GridSpecs();

    @HostListener( 'window:resize', ['$event'] ) onResize( event ){ this.checkScrn(); }


    constructor( @Self() public appSpecs: ElementRef ){}

    ngAfterViewInit(){ this.checkScrn(); }

    checkScrn(){
        this.ScreenCore.Width   = this.appSpecs.nativeElement.offsetWidth;
        this.ScreenCore.Height  = this.appSpecs.nativeElement.offsetHeight;

        this.activteGrid( this.ScreenCore );
    }

    activteGrid( data: ScrnCore ){ this.GridSettings = gridManager( data.Width ); }
}

AppComponent (both combined as one class)

export class AppComponent implements OnInit, AfterViewInit{
    MainFrame    : SiteFrame = new SiteFrame();
    ScreenCore   : ScrnCore  = new ScrnCore();
    GridSettings : GridSpecs = new GridSpecs();

    @HostListener('window:resize', ['$event'])
    reSize(event){ this.calcScreen(); this.checkScrn(); }

    constructor( @Self() public appSpecs: ElementRef ){}

    ngOnInit(){ this.calcScreen(); }

    ngAfterViewInit(){ this.checkScrn(); }

    calcScreen(){ this.MainFrame = uiMonitor(); }

    checkScrn(){
        this.ScreenCore.Width   = this.appSpecs.nativeElement.offsetWidth;
        this.ScreenCore.Height  = this.appSpecs.nativeElement.offsetHeight;

        this.activteGrid( this.ScreenCore );
    }

    activteGrid( data: ScrnCore ){ this.GridSettings = gridManager( data.Width ); }
}

Answer 1

原来我所要做的就是把它像这样留在 AppComponent

@HostListener('window:resize', ['$event'])
reSize(event){ this.calcScreen(); this.checkScrn(); }

即使我没有在 AppComponent 上定义它，它仍然会注册，因为我正在将 GridFactory 扩展到它，我本能地认为这是行不通的……但是它确实 :)

Answer 2

您可以使用 super 前缀从扩展 class 调用方法。

因此您的应用程序方法应如下所示：

@HostListener('window:resize', ['$event'])
reSize(event){ this.calcScreen(); super.onResize(event); }

这种方法避免了代码冗余。

在扩展类时如何防止 @HostListeners 相互覆盖？

How do I keep @HostListeners from overriding each other when extending classes?

angular

ecmascript-6

typescript2.2

在扩展 类 时如何防止 @HostListeners 相互覆盖？

How do I keep @HostListeners from overriding each other when extending classes?

angular

ecmascript-6

typescript2.2

在扩展类时如何防止 @HostListeners 相互覆盖？