angular2：如何使用observables来反弹窗口：调整大小

所以我想弄清楚一个方法来取消窗口：使用observables调整事件大小，所以某些功能只会在用户停止调整窗口大小后调用，没有尺寸变化（比如说1秒）就通过了。angular2：如何使用observables来反弹窗口：调整大小

https://plnkr.co/edit/cGA97v08rpc7lAgitCOd

import {Component} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div (window:resize)="doSmth($event)"> 
     <h2>Resize window to get number: {{size}}</h2> 

    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    size: number; 
    constructor() { 
    } 

    doSmth(e: Event) { 
    this.size = e.target.innerWidth; 
    } 
}

仅仅是使用窗口一个简单的示例：调整大小和显示，它会立即作出反应（使用“启动预览在单独的窗口”）。

来源

2016-07-05 LithStud

我认为你不能用可观察的方式去除这种方式。事实上，这样的事情是不支持开箱即用的，但现在有这个开放式问题：

https://github.com/angular/angular/issues/4062

为了实现自己的目标，你可以直接使用Observable.fromEvent获得这个事件的可观察的。因此，您可以在此可观察项上应用debounceTime运算符。

这里有一个例子：

@Component({ 
    (...) 
}) 
export class App { 
    size: number; 
    constructor() { 
    Observable.fromEvent(window, 'resize') 
     .debounceTime(1500) 
     .subscribe((event) => { 
      this.doSmth(event); 
     }); 
    } 

    doSmth(e: Event) { 
    console.log('do smth'); 
    this.size = e.target.innerWidth; 
    } 
}

看到这个plunkr：https://plnkr.co/edit/uVrRXtnZj8warQ3qUTdN?p=preview

来源

2016-07-05 09:37:16

不客气！也许这篇文章可能会让你感兴趣：https：//gist.github.com/staltz/868e7e9bc2a7b8c1f754 ;-) –

看来这是现在这个功能的当前错误/问题：https：//github.com/angular/angular /问题/ 13248 –

在我们的应用程序之一，我们也有蒂埃里TEMPLIER提出了实现，但我注意到，角度的变化检测被烧成（一次很多）在窗口调整大小，这使我们的应用程序调整缓慢。

利用区&主题，像这样固定的：

private changeSubject = new Subject<number>(); 

constructor(private zone: NgZone) { 
    this.zone.runOutsideAngular(() => { 
    Observable.fromEvent(window, 'resize') 
    .debounceTime(1500).distinctUntilChanged().subscribe((e: Event) => { 
     this.zone.run(() => { 
     this.changeSubject.next(e); 
     }) 
    } 
    ) 
    }); 
    this.changeSubject.subscribe((e: Event) => { this.doSmth(e); }); 
}

这个问题here见plunker（调整屏幕和手表控制台）。

与此问题的解决方案here（调整屏幕和手表控制台）。

来源

2017-05-18 18:30:48

您可以使用@HostListener修饰符。这是订阅这种事件的常用方式。

@Component({ 
    // ... 
}) 
export class App { 
    private changeSize = new Subject(); 

    constructor() { 
    this.changeSize 
    .asObservable() 
    .throttleTime(1000) 
    .subscribe(innerWidth => console.log('innerWidth:', innerWidth)); 
    } 

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

你可以阅读更多关于@HostListenerhere或here。

来源

2018-02-09 11:57:22 Londeren

angular2：如何使用observables来反弹窗口：调整大小

回答

相关问题