角度 - オンサイズで他のページにリダイレクトしたい

Question

角度4を使用していて、サイズ変更時にイベントをトリガするwindow.onresizeに行ってきました。医者のコンポーネントを読み込んだ後、コンストラクタにそれを書きましたが、これはトリガしていません。問題は、医者のハイパーリンクをクリックしてサイドパネルとして医師のコンポーネントを表示していることです。

サイドパネルの表示と非表示にsneakPeak変数を使用しています。

constructor(private router: Router) { 
    window.onresize = (e) => 
    { 
     this.width = window.innerWidth; 
     if(this.width <= 1000 && this.sneakPeak) { 
      this.router.navigate(['/doctors']); 
     } 
    }; 
} 

1000px（幅）以下のウィンドウのサイズを変更すると、医師のページにリダイレクトしたいと思います。これどうやってするの？

Answer 1

DOMエレメントのイベントを購読するには、@angular/coreからHostListenerを使用する必要があります。

@HostListener('window:resize', ['$event']) 
onResize(event) { 
    if(event.target.innerWidth <= 1000 && this.sneakPeak) { 
    this.router.navigate(['/doctors']); 
    } 
} 

Answer 2

テンプレートにイベントを登録することをおすすめします。これはおそらくwindowの参照のためにserver side renderに問題を引き起こすでしょう。

//our root app component 
import { Component, NgModule, VERSION} from '@angular/core' 
import { BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: `<div (window:resize)="onResize($event)">hello</div>`, 

}) 
export class AppComponent { 
    onResize(event) { 
    const innerWidth = event.target.innerWidth; 
    console.log(innerWidth); 
    } 
} 

私はここplunkerを共有しよう：http://plnkr.co/edit/CSZKfH?p=preview