'관찰 가능'유형에 '필터'속성이 없습니다.

'관찰 가능'유형에 '필터'속성이 없습니다.'

---

안녕하세요 저는 라우터 3.0과 함께 Angular 2 final을 사용하고 있습니다. 발생하는 이벤트를 필터링하고 싶습니다.this.router.events

내가하고 싶은 것 :

import 'rxjs/operator/filter';

//...

this.router.events
  .filter((event:Event) => event instanceof NavigationEnd)
  .subscribe(x => console.log(x))

eventinstanceof를 할 수있다 NavigationEnd, NavigationStart또는 RoutesRecognized하지만 난 단지합니다 NavigationEnd. 하지만 오류가 발생합니다.

Property 'filter' does not exist on type Observable<Event>

컴파일 시간 동안.

전체 rxjs라이브러리를 가져 오면 오류가 사라집니다. 전체 rxjs 라이브러리를로드하지 않고 작동하도록하려면 무엇을 가져와야합니까?

---

최신 정보

들어 RXJS 5.x버전 :

import 'rxjs/add/operator/filter';

들어 RXJS 6.x 버전 :

import { filter } from 'rxjs/operators';

다음과 같은 규칙이 도움이 자바 스크립트 개발자 리팩터링 수입 경로에 RxJS 팀에 의해 설계되었습니다 :

1. rxjs/operators: 파이프 가능한 모든 연산자를 포함합니다.

import { map, filter, scan } from 'rxjs/operators';

2. rxjs: 생성 방법, 유형, 스케줄러 및 유틸리티를 포함합니다.

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

---

이 시나리오에 대한 몇 가지 가능한 수정 사항이 있습니다.

1) 파이프 가능한 연산자 사용

파이프 가능 연산자는 rxjs / add / operator / *에있는 "패치"연산자보다 필요한 연산자 만 끌어 오기위한 더 나은 접근 방식입니다.

import { filter } from 'rxjs/operators';

// ..

 this.router.events.pipe(
   filter((event:Event) => event instanceof NavigationEnd)
 ).subscribe(x => console.log(x))

---

2) 'rxjs / add / operator / filter'사용

import 문을 import 'rxjs/add/operator/filter'. 이렇게하면 Observable 클래스의 모든 인스턴스에 메서드를 수정 Observable.prototype하고 추가 filter합니다.

두 가지 결과가 있습니다.

• 애플리케이션 당 한 번만 import 문을 실행하는 것으로 충분합니다.
• 공유 라이브러리 / npm 패키지에서 이것은 라이브러리 소비자에게 약간의 혼란을 가져올 수 있습니다 ( filter()메소드는 Observable라이브러리를 사용하는 동안 마술처럼 나타납니다 )

---

3) 연산자 가져 오기를 그대로두고 호출 방법 변경

The statement import 'rxjs/operator/filter' is perfectly valid. It will import just the operator. This approach will not mess with the Observable.prototype. On downside it will make it more difficult to chain several operators.

import 'rxjs/operator/filter'; // This is valid import statement.
                               // It will import the operator without 
                               // modifying Observable prototype
// ..

// Change how the operator is called
filter.call(
   this.router.events, 
   (event:Event) => event instanceof NavigationEnd
).subscribe(x => console.log(x));

---

More details: Pipeable Operators

---

Angular Update(5.x to 6.x) also comes with update of rxjs from 5.x to 6.x So simply add

import { filter } from 'rxjs/operators';

then

this.router.events.pipe(
  filter((event:Event) => event instanceof NavigationEnd)
).subscribe(x => console.log(x))

Hope That helps someone

---

After updating to Rxjs 6 with Angular 6 upgrade

import { map, filter, scan } from 'rxjs/operators';

...
this.registrationForm.valueChanges
      .pipe(
        filter(() => this.registrationForm.valid),
        map((registrationForm: any) => {
          this.registrationVm.username = registrationForm.username;
          this.registrationVm.password = registrationForm.password;
          this.registrationVm.passwordConfirm = registrationForm.passwordConfirm;
        })
      )
      .subscribe();

---

The easiest way to work around that is to just

npm install rxjs-compat 

which will make any version differences magically go away!

---

Please check the type of Event here -> .filter((event:Event)

ReferenceURL : https://stackoverflow.com/questions/39514564/property-filter-does-not-exist-on-type-observableevent