标签: rxjs6

我想将我的rxjs代码更新为6得到我没有得到它.

在我每隔5秒钟进行下面的新数据调查之前:

import { Observable, interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

var result = interval(5000).switchMap(() => this._authHttp.get(url)).map(res => res.json().results);

现在......当然,它已经坏了,文档让我无处可去.

如何编写以上内容以符合rxjs 6？

谢谢

我刚刚观看了 John Papa 的 ngConf 视频，将 SubSink 作为取消订阅可观察对象的最佳实践。

我实际上是在使用 Subscriptions[] 然后将订阅推送到其中然后 forEach 在 cmp destroy 取消订阅。

我错过了他们的东西还是只是使用 SubSink 的可读性改进？

我尝试在我的角度6项目中导入rxjs计时器

import { timer } from 'rxjs/observable/timer';

我也尝试过,

Rx.Observable.timer(200, 100)

它们不起作用

这是关于plunker的代码

刚刚从rxjs 5/angular 5移动到rxjs 6/angular 6,经历了这个迁移指南.似乎无法弄清楚现在应该是什么,任何帮助表示赞赏.

import { Observable, of } from 'rxjs';
[ts] 'of' is declared but its value is never read.

// trivial example of what im trying to replace
  isLoggedIn(): Observable<boolean> {
    return Observable.of(true);
  }

这是app.module.ts我试图在不同的项目中完成导入地图,它工作正常,但在这个项目中,它不起作用.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {HttpModule} from '@angular/http';

    import { AppComponent } from './app.component';
    import { PagesComponent } from './pages/pages.component';

    @NgModule({
      declarations: [
        AppComponent,
        PagesComponent
      ],
      imports: [
        BrowserModule,
        HttpModule

      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {PageService} from './page.service';

@Component({

  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ["../assets/public/css/adminstyle.css",
            "../assets/public/css/demo.css",
          "../assets/public/css/style.css"
        ,"../assets/public/css/stylesheet.css"],
  providers:[PageService]
})
export class AppComponent {
  title …

我正在将我的应用程序升级到Angular 6.我正在从Angular 4升级,但下面的代码在Angular 6中导致错误,它在Angular 4中运行良好.

我得到的错误:

类型'typeof Observable'上不存在属性'of'

错误:类型'Observable'上不存在属性'catch'

我该如何解决这些错误？

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }

我写了一个可用的函数pipe:

HandleHttpBasicError<T>()
{
    return ((source:Observable<T>) => {
        return source.pipe(
            catchError((err:any) => {
                let msg = '';
                if(err && err instanceof HttpErrorResponse)
                {
                    if(err.status == 0)
                        msg += "The server didn't respond";
                }
                throw {
                    err,
                    msg
                } as CustomError
            })
        )

    })
}

我可以在我的这个方式使用这个功能HttpService:

checkExist(id:string)
{
    return this.http.head<void>(environment.apiUrl + 'some_url/' + id)
        .pipe(
            HandleHttpBasicError(),
            catchError((err:CustomError) => {
                if(err.msg)
                    throw err.msg;
                if(err.err.status == HttpStatusCodes.NOT_FOUND)
                    throw("It doesn't exist.");
                throw(err);
            })

        )
}

它工作得很好.当我订阅时checkExist(),我得到一个很好的错误消息,因为HandleHttpBasicError首先捕获一个错误并将catchError() …

目前,有一种情况是多个组件使用共享服务中的方法.此方法对端点进行HTTP调用,该端点始终具有相同的响应并返回Observable.是否可以与所有订阅者共享第一个响应以防止重复的HTTP请求？

以下是上述方案的简化版本:

class SharedService {
  constructor(private http: HttpClient) {}

  getSomeData(): Observable<any> {
    return this.http.get<any>('some/endpoint');
  }
}

class Component1 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something...')
    );
  }
}

class Component2 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something different...')
    );
  }
}

使用案例:每分钟调用一个函数(60000毫秒),调度存储操作以获取lastUpdated项目的状态,在响应和过滤时,更新存储,更新的存储被读取为可观察的并显示在视图中).只要Web应用程序处于打开状态(如此无限期),就需要进行此操作.

目前,我正在使用这个:

this.refreshDate = window.setInterval(
  () => this.store.dispatch(new FetchLastUpdate())
, 60000);

当视图被销毁/卸载时,我删除间隔如下:

if (this.refreshDate) {
  clearInterval(this.refreshDate);
}

这是有效/有效的,还是很麻烦？

为什么我要使用RxJS轮询策略,如:

interval(60000)
  .pipe(
    startWith(0),
    switchMap(() => this.store.dispatch(new FetchLastUpdate()))
   );

要么

timer(0, 60000)
  .pipe(
    switchMap(() => this.store.dispatch(new FetchLastUpdate()))
  );

TL; DR: window.setInterval() vs. RxJS timer()/interval()

结论/答案(为了便于研究):

使用RxJS函数来设置间隔或执行轮询有很大的好处,这些好处在选定的答案中也可以在注释中解释,但是(通过评论中的讨论)得出的结论是,对于" 本帖子开头的用例 "部分,没有必要使用RxJS,事实上如果你没有在你的程序的任何其他部分使用RxJS,请不要仅为此导入它,但在我的情况下,我有已导入并在其他地方使用RxJS.

我已经阅读了油门时间文档，但我没有完全了解操作员。

我知道如何throttleTime(1000)运作。事件到达后，它将跳过所有后续事件 1 秒，然后再次开始此过程。

我难以理解的是究竟是如何ThrottleConfig工作的，这是操作符的第三个参数。

throttleTime<T>(
  duration: number, 
  scheduler: SchedulerLike = async, 
  config: ThrottleConfig = defaultThrottleConfig): MonoTypeOperatorFunction<T>

leading和trailing属性如何改变源 Observable 的功能？

我已经阅读了很多文档，但他们没有清楚地解释这一点。

所以有四种选择：

1. { leading: true, trailing: false }:
   默认选项，接收事件后跳过指定持续时间的其他事件，然后重复。
2. { leading: false, trailing: true }：
   ？？？
3. { leading: false, trailing: false }：
   对此进行了测试，并且 Observable 根本不发出任何内容。
4. { leading: true, trailing: true }：
   ？？？