下面的代码让我们观察Angular中任何给定div的大小变化。

<div #observed-div>
</div>

然后在组件中:

oldWidth = 0;
oldHeight = 0;

@ViewChild('observed-div') myDiv: ElementRef;
ngAfterViewChecked() {
  const newWidth = this.myDiv.nativeElement.offsetWidth;
  const newHeight = this.myDiv.nativeElement.offsetHeight;
  if (this.oldWidth !== newWidth || this.oldHeight !== newHeight)
    console.log('resized!');

  this.oldWidth = newWidth;
  this.oldHeight = newHeight;
}

假设< 600px对你来说意味着移动，你可以使用这个可观察对象并订阅它:

首先，我们需要当前窗口大小。因此，我们创建了一个只发出一个值的可观察对象:当前窗口大小。

initial$ = Observable.of(window.innerWidth > 599 ? false : true);

然后我们需要创建另一个可观察对象，这样我们就知道窗口大小什么时候被改变了。为此，我们可以使用“fromEvent”操作符。要了解更多关于rxjs的操作符，请访问:rxjs

resize$ = Observable.fromEvent(window, 'resize').map((event: any) => {
  return event.target.innerWidth > 599 ? false : true;
 });

合并这两个流来接收我们的可观察对象:

mobile$ = Observable.merge(this.resize$, this.initial$).distinctUntilChanged();

现在你可以像这样订阅它:

mobile$.subscribe((event) => { console.log(event); });

记得取消订阅:)

我所做的就像Johannes Hoppe建议的那样:

import { EventManager } from '@angular/platform-browser'; import { Injectable, EventEmitter } from '@angular/core'; @Injectable() export class ResizeService { public onResize$ = new EventEmitter<{ width: number; height: number; }>(); constructor(eventManager: EventManager) { eventManager.addGlobalEventListener('window', 'resize', event => this.onResize$.emit({ width: event.target.innerWidth, height: event.target.innerHeight })); } getWindowSize(){ this.onResize$.emit({ width: window.innerWidth, height: window.innerHeight }); } }

在app.component.ts:

Import { ResizeService } from ".shared/services/resize.service" import { Component } from "@angular/core" @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent{ windowSize: {width: number, height: number}; constructor(private resizeService: ResizeService){ } ngOnInit(){ this.resizeService.onResize$.subscribe((value) => { this.windowSize = value; }); this.resizeService.getWindowSize(); } }

然后在你的app.component.html中:

<router-outlet *ngIf = "windowSize? "宽度> 1280 && windowSize?。高度> 700;errorComponent”> < / router-outlet > < ng-template # errorComponent > < app-error-component > < / app-error-component > < / ng-template >

这并不是问题的确切答案，但它可以帮助那些需要检测任何元素的大小变化的人。

我已经创建了一个库，可以将调整大小的事件添加到任何元素中——Angular Resize event。

它内部使用resizsensor从CSS元素查询。

示例使用

HTML

<div (resized)="onResized($event)"></div>

打印稿

@Component({...})
class MyComponent {
  width: number;
  height: number;

  onResized(event: ResizedEvent): void {
    this.width = event.newWidth;
    this.height = event.newHeight;
  }
}

我还没看到有人在谈论angular/cdk的MediaMatcher。

您可以定义一个MediaQuery并将一个侦听器附加到它-然后在模板(或ts)上的任何地方，如果匹配了Matcher，就可以调用东西。 LiveExample

App.Component.ts

import {Component, ChangeDetectorRef} from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mobileQuery: MediaQueryList;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  private _mobileQueryListener: () => void;

  ngOnDestroy() {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

}

App.Component.Html

<div [class]="mobileQuery.matches ? 'text-red' : 'text-blue'"> I turn red on mobile mode 
</div>

App.Component.css

.text-red { 
   color: red;
}

.text-blue {
   color: blue;
}

来源:https://material.angular.io/components/sidenav/overview

正确的方法是利用EventManager类来绑定事件。这让你的代码可以在其他平台上工作，例如使用Angular Universal进行服务器端渲染。

import { EventManager } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';

@Injectable()
export class ResizeService {

  get onResize$(): Observable<Window> {
    return this.resizeSubject.asObservable();
  }

  private resizeSubject: Subject<Window>;

  constructor(private eventManager: EventManager) {
    this.resizeSubject = new Subject();
    this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
  }

  private onResize(event: UIEvent) {
    this.resizeSubject.next(<Window>event.target);
  }
}

在组件中使用这个服务非常简单，只需将这个服务作为提供者添加到app.module中，然后在组件的构造函数中导入它。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: ``,
  styles: [``]
})
export class MyComponent implements OnInit {

  private resizeSubscription: Subscription;

  constructor(private resizeService: ResizeService) { }

  ngOnInit() {
    this.resizeSubscription = this.resizeService.onResize$
      .subscribe(size => console.log(size));
  }

  ngOnDestroy() {
    if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
    }
  }
}