Angular 2：检测屏幕调整大小的自定义指令

Question

我想创建一个可以检测浏览器高度和宽度变化的自定义指令。

我的指令：

        import { Directive, ElementRef, Input, NgZone} from '@angular/core';

        @Directive({ selector: '[resize]' })
        export class ResizeDirective {
            constructor(private ngZone: NgZone) {
                window.onresize = (e) => {
                    //ngZone.run will help to run change detection
                    this.ngZone.run(() => {
                        console.log("Width: " + window.innerWidth);
                        console.log("Height: " + window.innerHeight);
                    });
                };
            }
        }

app.module.ts:

            import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';


            import { BrowserModule } from '@angular/platform-browser';
            import { ResizeDirective } from './resize.directive';

            @NgModule({
                imports: [
                    BrowserModule,
                    FormsModule,
                ],
                declarations:
                [AppComponent, ResizeDirectiv],               
                bootstrap: [AppComponent],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]

            })

我已将指令放在 app.component.html 的 Body 标记中。所以每当浏览器屏幕尺寸发生变化时，我都需要进行特定的操作。

app.component.html

            <div class="outterContainer" style="width:100%;height:100%;"  resizePlugin>
            <div id="header1" class="header">


            </div>

            <div id="contentSection" class="content">
            <div>
                <div>Resize Demo</div>
                <input [(ngModel)]="studname">{{studname}}
                <createProject></createProject>
                <AddEvent></AddEvent>
                <h2>NavBar + Routing + DragAndDrop + ModalPopup + ReAgrrange Demo</h2>',

            </div>  

            <div>
                <div>
                    <h2>NavBar + Routing + DragAndDrop + ModalPopup Demo</h2>
                    <navbar></navbar>
                    <router-outlet></router-outlet>
                </div>
            </div>
            </div>
            </div>

我做错了吗？无论如何我可以修改此指令以使其侦听浏览器屏幕尺寸的变化吗？

Answer 1

您的指令可能看起来有问题。 angular 不监听您直接传递的事件 angular 有一个装饰器用于监听@HostListener 事件。请尝试以下代码，它可能对您有所帮助

import { Directive, ElementRef, Input, NgZone,HostListener} from '@angular/core';

    @Directive({ selector: '[resize]' })
    export class ResizeDirective {
        constructor(private ngZone: NgZone) {}
        @HostListener('window:resize', ['$event'])
        onResize(event){
                //ngZone.run will help to run change detection
                this.ngZone.run(() => {
                    console.log("Width: " + window.innerWidth);
                    console.log("Height: " + window.innerHeight);
                });
        }
    }

Answer 2

你已经在你的 app.component.html 中写了 ResizeDirectiv，但是声明的末尾多了一个 eResizeDirectiv'e' 在您的 app.module.ts 中

它们必须相同才能映射。