Observable.combineLatest不是函数

时间:2018-07-16 20:03:13

标签: angular routerlink

我有一个主页页面,用户在其中单击与我联系,将其重定向到联系页面:

home.component.html

<div>
  <a routerLink="/contact" [queryParams]="sendOBj">Contact me</a>
</div>

home.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '../../../node_modules/@angular/router';
import { FollowersService } from '../followers.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  myfollowers: any[]; 
  sendOBj: {id: any, name: any};

  constructor(private followers: FollowersService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.myfollowers = this.followers.getFollowers();   
    this.sendOBj = {id: this.myfollowers[0].id, name: this.myfollowers[0].name };
  }

}

contact.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '../../../node_modules/@angular/router';
import { Observable } from '../../../node_modules/rxjs/Observable';
import 'rxjs/observable/combineLatest';


@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  constructor( private route: ActivatedRoute) { }

  ngOnInit() {

    Observable.combineLatest([
      this.route.queryParamMap
    ])
      .subscribe(
        combined=>{
          let id = combined[1].get('id');
          console.log('id', id);
        }
      );

    this.route.queryParamMap.subscribe();    
  }
}

通过点击首页上的与我联系,我收到此错误:

ContactComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Observable_1.Observable.combineLatest is not a function

请帮助我找出问题所在。

2 个答案:

答案 0 :(得分:6)

在角度6中,

您只需要:

import {combineLatest} from "rxjs/index";

并替换

Observable.combineLatest(...)

作者

combineLastest(...)

答案 1 :(得分:0)

我这样解决了这个问题:

我首先升级到Angular 6,然后像这样修改 contact.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '../../../node_modules/@angular/router';    
import { combineLatest } from 'rxjs/operators';
import { CombineLatestSubscriber } from '../../../node_modules/rxjs/operators/combineLatest';



@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  constructor( private route: ActivatedRoute) { }

  ngOnInit() {

      this.route.paramMap.subscribe();

      this.route.queryParamMap.subscribe(
        user=>{
          console.log('username: ', user.get('name'));
          console.log('user id', user.get('id'));
        }
      );        

  }
}