Question

我正在使用Angular 4并使用window.onresize来调整resize上的事件。在我加载医生组件之后，我在构造函数中编写了这个，但是没有触发。问题是我在点击医生超链接时将医生组件显示为侧面板。

我正在使用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

您应该使用HostListener中的@angular/core来订阅DOM元素的事件。

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

Answer 2

我建议在模板中注册该事件。由于server side render引用，这可能会导致window出现问题。

//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

Angular - 在调整大小时想要重定向到其他页面

2 个答案: