Html 通过路由器链路发送数据

我试图使用路由按钮中的

[queryParams]=“{usd'：usd，'count'：count'：country，'name'：name}”

将数据从一个页面传递到另一个路由页面。这是完美的工作，但有一个错误，在我的控制台

ERROR in src/app/hairstylist-profile/hairstylist-profile.component.ts(18,40): error TS2339: Property 'value' does not exist on type 'Observable<Params>'.
src/app/hairstylist-profile/hairstylist-profile.component.ts(20,42): error TS2339: Property 'value' does not exist on type 'Observable<Params>'.
src/app/hairstylist-profile/hairstylist-profile.component.ts(22,41): error TS2339: Property 'value' does not exist on type 'Observable<Params>'.

值关键字中有错误。那么如何解决呢？

这可能会对您有所帮助

ngOnInit() {
       this.route
               .queryParams
               .subscribe(params => {
                   // Defaults to 0 if no query param provided.
                 this.usd = params['usd'] || 0;
                 this.count = params['count'] || 0;
                 this.name = params['name'] || ';
                 });
}

---

无法使用.value，必须订阅查询参数更新4.0.0

有关更多详细信息，请参见Angular docs

原创

使用服务是一种方式。在route params中，您应该只传递希望反映在浏览器URL栏中的数据

另见

RC.4附带的路由器重新引入了

数据

constructor(private route: ActivatedRoute) {}

和

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

和

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

---

另请参见位于

的Plunker读取错误消息；你没有参数，你有一个可观察的参数。可能的重复只是为了以后偶然发现的任何人的更新：你可以通过

ActivatedRouteSnapshot

-例如

this.route.snapshot.queryParams['usd']访问路由参数，而无需订阅可观察的参数

注意，当您更改路线时，这显然不会更新。始终建议使用可观察的。通过管道将这些查询值传输到

switchMap（）

以进行API调用，或者在模板中使用

| async

管道，这是比订阅更好的选择。