'ActivatedRoute'类型中不存在属性'paramMap'。 / node_modules / @ angular / router / index“'没有导出的成员'ParamMap'

时间:2017-07-29 11:18:40

标签: angular angular-routing angular-router

英雄detail.component.ts

import { Component, Input, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';
import { ActivatedRoute} from '@angular/router';
import {  ParamMap } from '@angular/router';
import { Location }                 from '@angular/common';
import { Hero } from '../hero';
import { HeroService } from '../services/hero.service';

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

  @Input() hero: Hero;

  constructor(
    private heroService: HeroService,
  private route: ActivatedRoute,
  private location: Location
  ) { }

  ngOnInit(): void {
  this.route.paramMap
    .switchMap((params: ParamMap) =>     this.heroService.getHero(+params.get('id')))
    .subscribe(hero => this.hero = hero);
}

goBack(): void {
  this.location.back();
}

}
  

错误:1> node_modules / @ angular / router / index“'没有导出的成员'ParamMap'。

     

2 - ; 'ActivatedRoute'类型中不存在属性'paramMap'。

5 个答案:

答案 0 :(得分:4)

ParamMap版本中引入了

4.0.0-rc.6。确保你至少有Angular 4版本。

答案 1 :(得分:0)

此问题可能是角度版本冲突。您的版本可能低于4.0.0-rc.6版本 此方法可能有助于解决以前的问题

将波纹管线添加到参数send component:

<强> this.router.navigate([&#39;轮廓&#39],{queryParams:{的authData:电子邮件}});

将波纹管线添加到参数接收组件:

<强> this.route.snapshot.queryParams [&#39;的authData&#39;];

下面到Routermodule的行:     的 {       路径:&#39;轮廓&#39 ;,       component:ProfileComponent     }

答案 2 :(得分:0)

在最新版本的angular(即2.4.10)中,您只需使用

ID 即可

常量ID = + this.route.snapshot.params ['id'];

答案 3 :(得分:0)

在最新版本上,您现在可以编写:

import { ActivatedRoute } from '@angular/router';
//...
constructor(private activatedRoute: ActivatedRoute) {}
//...
ngOnInit() {
    const id = this.activatedRoute.snapshot.paramMap.get('id');
    if (id) {
        console.log ('id parameter: ', id);
    } else {
          console.log ('no id parameter');
    }
}

希望它可以提供帮助。

答案 4 :(得分:0)

我在Angular教程中遇到了类似的问题,需要在hero-detail.component.ts中更改此代码

getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
        .subscribe(hero => this.hero = hero);
}

对此:

getHero(): void {
    const id= +this.route.snapshot.params['id'];
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
}