角度窗口调整大小事件

2020/10/10 06:41 · javascript ·  · 0评论

我想基于窗口重新调整大小事件(在加载和动态运行)执行一些任务。

目前,我的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;
}

支持的全球目标是windowdocumentbody

直到在Angular中实现https://github.com/angular/angular/issues/13248为止,性能才能更好地强制性地订阅DOM事件,并使用RXJS减少事件数量,如其他一些答案所示。

@Günter的答案是正确的。我只是想提出另一种方法。

您还可以在@Component()-decorator中添加主机绑定您可以将事件和所需的函数调用放在主机元数据属性中,如下所示:

@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 service使用RxJS 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
        });
    }

}

对反应式编程的深刻理解将始终有助于克服难题。希望这对某人有帮助。

我还没有看到任何人谈论MediaMatcherangular/cdk

您可以定义MediaQuery并为其添加一个侦听器-然后,如果Matcher匹配,则可以在模板(或ts)的任何位置调用东西。
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

角CDK中有一个ViewportRuler服务。它在区域之外运行,并且也可以与服务器端渲染一起使用。

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

记得退订:)

基于@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

它在内部使用ResizeSensorCSS元素查询

用法示例

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

我编写此lib来查找Angular中组件边界尺寸的一次更改(调整大小),可能对其他人有帮助。您可以将其放在根组件上,其作用与调整窗口大小相同。

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

下面的代码可让您观察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;
}

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

希望对您有所帮助!

我检查了大多数这些答案。然后决定查看有关Layout的Angular文档

Angular拥有自己的Observer,用于检测不同的大小,并且很容易实现到组件或服务中。

一个简单的例子是:

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

希望能帮助到你

所有解决方案均不适用于服务器端或通用角度

这是上述最新版本的Rxjs对@GiridharKamik答案的更新。

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject, fromEvent } from 'rxjs';
import { pluck, distinctUntilChanged, map } from 'rxjs/operators';

@Injectable()
export class WindowService {
    height$: Observable<number>;
    constructor() {
        const windowSize$ = new BehaviorSubject(getWindowSize());

        this.height$ = windowSize$.pipe(pluck('height'), distinctUntilChanged());

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

}

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

这是我创建的一个简单干净的解决方案,因此可以将其注入多个组件中。

ResizeService.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResizeService {

  constructor() {

    window.addEventListener('resize', (e) => {
      this.onResize.next();
    });

  }

  public onResize = new Subject();

}

正在使用:

constructor(
  private resizeService: ResizeService
) { 

  this.subscriptions.push(this.resizeService.onResize.subscribe(() => {
    // Do stuff
  }));

}

private subscriptions: Subscription[] = [];
本文地址:http://javascript.askforanswer.com/jiaoduchuangkoudiaozhengdaxiaoshijian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!