창 크기 조정 이벤트 (로드 및 동적)를 기반으로 일부 작업을 수행하고 싶습니다.

현재 다음과 같이 내 DOM이 있습니다.

<div id="Harbour">
    <div id="Port" (window:resize)="onResize($event)" >
        <router-outlet></router-outlet>
    </div>
</div>

이벤트가 올바르게 시작됩니다

export class AppComponent {
   onResize(event) {
        console.log(event);
    }
}

이 이벤트 객체에서 너비와 높이를 어떻게 검색합니까?

감사.

<div (window:resize)="onResize($event)"

onResize(event) {
  event.target.innerWidth;
}

또는 HostListener 데코레이터 사용 :

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth;
}

지원되는 글로벌 목표는 window, document하고 body.

https://github.com/angular/angular/issues/13248 이 Angular로 구현 될 때까지 성능이 DOM 이벤트를 필수적으로 구독하고 RXJS를 사용하여 다른 답변 중 일부에 표시된 것처럼 이벤트 양을 줄이는 것이 좋습니다.

@ 건터의 대답이 맞습니다. 방금 다른 방법을 제안하고 싶었습니다.

@Component()-decorator 내부에 호스트 바인딩을 추가 할 수도 있습니다 . 다음과 같이 이벤트 및 원하는 함수 호출을 host-metadata-property에 넣을 수 있습니다.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
export class AppComponent{
   onResize(event){
     event.target.innerWidth; // window width
   }
}

나는 이것이 오래 전에 요청되었다는 것을 알고 있지만 지금이 더 좋은 방법이 있습니다! 그래도 누군가이 대답을 볼 수 있는지 확실하지 않습니다. 분명히 수입품 :

import { fromEvent, Observable, Subscription } from "rxjs";

그런 다음 구성 요소에서

resizeObservable$: Observable<Event>
resizeSubscription$: Subscription

ngOnInit() {
    this.resizeObservable$ = fromEvent(window, 'resize')
    this.resizeSubscription$ = this.resizeObservable$.subscribe( evt => {
      console.log('event: ', evt)
    })
}

그런 다음 파괴를 구독 취소하십시오!

ngOnDestroy() {
    this.resizeSubscription$.unsubscribe()
}

이를 수행하는 올바른 방법은 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();
    }
  }
}

여기에 더 좋은 방법이 있습니다. Birowsky의 답변을 기반으로 합니다.

1 단계 : 만들기 angular serviceRxJS와 Observables은 .

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class WindowService {
    height$: Observable<number>;
    //create more Observables as and when needed for various properties
    hello: string = "Hello";
    constructor() {
        let windowSize$ = new BehaviorSubject(getWindowSize());

        this.height$ = (windowSize$.pluck('height') as Observable<number>).distinctUntilChanged();

        Observable.fromEvent(window, 'resize')
            .map(getWindowSize)
            .subscribe(windowSize$);
    }

}

function getWindowSize() {
    return {
        height: window.innerHeight
        //you can sense other parameters here
    };
};

2 단계 : 위의 내용을 삽입 하고 창 크기 조정 이벤트를 수신하려는 모든 곳에서 서비스 내에 생성 된 항목 service을 구독 Observables하십시오.

import { Component } from '@angular/core';
//import service
import { WindowService } from '../Services/window.service';

@Component({
    selector: 'pm-app',
    templateUrl: './componentTemplates/app.component.html',
    providers: [WindowService]
})
export class AppComponent { 

    constructor(private windowService: WindowService) {

        //subscribe to the window resize event
        windowService.height$.subscribe((value:any) => {
            //Do whatever you want with the value.
            //You can also subscribe to other observables of the service
        });
    }

}

리 액티브 프로그래밍에 대한 올바른 이해는 어려운 문제를 극복하는 데 항상 도움이됩니다. 이것이 누군가를 돕기를 바랍니다.

나는 대한 사람의 이야기를 보지 못했어요 MediaMatcher의 angular/cdk.

MediaQuery를 정의하고 리스너를 첨부 할 수 있습니다. 그런 다음 Matcher가 일치하는 경우 템플리트 (또는 ts)의 어느 곳에서나 컨텐츠를 호출 할 수 있습니다. 라이브 예

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

<600px가 사용자에게 모바일을 의미한다고 가정하면이 관찰 가능 항목을 사용하여 구독 할 수 있습니다.

먼저 현재 창 크기가 필요합니다. 따라서 현재 창 크기라는 단일 값만 방출하는 Observable을 만듭니다.

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); });

구독을 취소하십시오 :)

각도 CDK 에는 ViewportRuler 서비스가 있습니다. 영역 외부에서 실행되며 서버 측 렌더링에서도 작동합니다.

@cgatian의 솔루션을 기반으로 다음과 같은 단순화를 제안합니다.

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',
      e => this.onResize$.emit({
        width: e.target.innerWidth,
        height: e.target.innerHeight
      }));
  }
}

용법:

import { Component } from '@angular/core';
import { ResizeService } from './resize-service';

@Component({
  selector: 'my-component',
  template: `{{ rs.onResize$ | async | json }}`
})
export class MyComponent {
  constructor(private rs: ResizeService) { }
}

이것은 질문에 대한 정확한 대답은 아니지만 모든 요소의 크기 변화를 감지 해야하는 사람에게 도움이 될 수 있습니다.

resized요소 -Angular Resize Event에 이벤트를 추가하는 라이브러리를 만들었습니다 .

내부적 ResizeSensor으로 CSS Element Queries 에서 사용합니다 .

사용법 예

HTML

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

TypeScript

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

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

Angular에서 구성 요소 경계 크기 변경 (크기 조정)을 찾으면 이 lib 를 작성 하여 다른 사람들에게 도움이 될 수 있습니다. 루트 구성 요소에 넣을 수 있으며 창 크기 조정과 동일한 작업을 수행합니다.

1 단계 : 모듈 가져 오기

import { BoundSensorModule } from 'angular-bound-sensor';

@NgModule({
  (...)
  imports: [
    BoundSensorModule,
  ],
})
export class AppModule { }

2 단계 : 아래와 같은 지시문 추가

<simple-component boundSensor></simple-component>

3 단계 : 경계 크기 세부 정보 수신

import { HostListener } from '@angular/core';

@Component({
  selector: 'simple-component'
  (...)
})
class SimpleComponent {
  @HostListener('resize', ['$event'])
  onResize(event) {
    console.log(event.detail);
  }
}

Angular2 (2.1.0)에서는 ngZone을 사용하여 화면 변경 이벤트를 캡처합니다.

예제를 살펴보십시오.

import { Component, NgZone } from '@angular/core';//import ngZone library
...
//capture screen changed inside constructor
constructor(private ngZone: NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
        });
    };
}

도움이 되었기를 바랍니다.

아래 코드는 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;
}

모든 솔루션이 서버 측 또는 각도 범용으로 작동하지 않습니다

나는 대부분의 답변을 확인했다. 그런 다음 Layout의 Angular 설명서를 확인하기로 결정했습니다 .

Angular에는 다양한 크기를 감지하기위한 자체 관찰자가 있으며 구성 요소 또는 서비스에 쉽게 구현할 수 있습니다.

간단한 예는 다음과 같습니다.

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}

그것이 도움이되기를 바랍니다