Question

我正在构建一个类来扩展所有侦听调整大小事件的组件

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

在其他组件中，我会侦听同一个事件，这会导致在扩展类时覆盖另一个事件，因此当窗口大小发生变化时只会触发一个事件。我发现这是问题所在，因为我有一个大课，我不评论在一个地方修补一切。当我把它添加到班级

时

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

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

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

他们都按照预期运行。

我该如何解决这个问题？到目前为止，这是我的课程。

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前缀从扩展类中调用方法。

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

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

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

在扩展类时，如何让@HostListeners不要互相覆盖？

2 个答案: