角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

あなたの指示に問題があるように見えるかもしれません。 angleは、あなたが直接渡したイベントをリッスンしません。@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); 
       }); 
     } 
    }