Angular 2：檢測屏幕大小的自定義指令

我想創建一個自定義指令，它可以檢測瀏覽器高度和寬度的變化。Angular 2：檢測屏幕大小的自定義指令

我的指令：

 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的身體標記內。所以無論何時瀏覽器屏幕尺寸發生變化，我都需要執行特定的操作。

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>

我做錯什麼了嗎？無論如何，我可以修改此指令以使其監聽瀏覽器屏幕大小更改？

來源

2017-05-22 Kishore L

Angular指令只能在Angular組件的模板中工作。除了'bootstrap：[']'或應用程序模塊中列出的以外，Angular組件僅適用於其他Angular組件。 –

Hi @GünterZöchbauer，我也嘗試將指令更改爲app.component.html，但它不起作用。我錯過了什麼嗎？ –

不知道你的意思是「也嘗試過」。也許你可以用你「也試過」的東西來更新你的問題。如果你想在Angular構建的頁面中添加一些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); 
       }); 
     } 
    }

來源

2017-05-22 10:32:15

用'window：resize'代替'window.onresize'，並在'@ angular/core'中爲'HostListener'添加缺少的導入，這就像一個魅力！此外，這似乎是'角度的方式'。 – lentschi

謝謝@lentschi。我已經更新了我的答案 –

Angular 2：檢測屏幕大小的自定義指令

回答

相關問題