角度激活的路线ParamsMap为空，具体取决于我在提供程序中指定的位置 [英] Angular Activated Route ParamsMap empty depending on where I specify the service in providers

问题描述

我正在使用ActivatedRoute从注入服务中的路由中获取参数.如果我在应用程序模块或应用程序组件中将服务指定为提供程序，则调用它时参数映射为空.如果我将其指定为提供服务的组件中的提供者，则它具有参数.

I'm using the ActivatedRoute to get a parameter from my route in an injected service. If I specify the service as a provider in the app module or app component the param map is empty when it gets called. If I specify it as a provider in the component that pulls in the service it has the parameter.

为什么这样工作?我很难找到有关ActivatedRoute的范围以及它如何与服务交互的良好信息.

Why is this working this way. I've had trouble finding good information on how the ActivatedRoute is scoped and how it interacts with services.

链接到plnkr中的此行为.取消注释a.component.ts中的第11行(提供者字段)，以使其在单击我时起作用！ https://plnkr.co/edit/3U9dZm9fdUlG6KW3GyoQ

Link to this behavior in plnkr. Uncomment line 11 (providers field) in a.component.ts to see it working when you click me! https://plnkr.co/edit/3U9dZm9fdUlG6KW3GyoQ

import {Component, OnInit} from '@angular/core'
import {AService} from './a.service.ts'

@Component({
  selector: 'app-a',
  template: `
    <div>
      <h2>Hello {{id}}</h2>
    </div>
  `,
//  providers: [AService]
})
export class AComponent implements OnInit {
  id: string;

  constructor(private aService: AService) {

  }

  ngOnInit() {
    this.id = this.aService.getId();
  }
}

推荐答案

您看到的行为归因于ActivatedRoutes中paramMap成员的性质.在您的服务构造函数中，您订阅了paramMap

The behavior you are seeing is due to the nature of the paramMap member in ActivatedRoutes. In your service constructor you subscribe to the paramMap

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.paramMap.subscribe(
      params => {
        this.id = params.get('id');
      }
    );
  } 

这将为其关联组件的路由生成 SnapShot 视图.那时，由于您声明a.service.ts为根模块app.module.ts的提供者，因此路由快照将不包含:id，因为与之关联的组件是您的app.component.ts.因此，当您调用方法时

Which results in a SnapShot view of the route for it's associated component. At that point since you declared the a.service.ts as a provider of your root module app.module.ts the snapshot of the route will contain no :id, because the component it is associated with is your app.component.ts. Therefore when you call your method

getId(): string {
    return this.id;
  }

从您的组件中，您将收到与app.component.ts关联且不包含值的初始快照.

from your component you're receiving the initial snapshot of the route which is associated with app.component.ts and will not contain a value.

但是，当您声明a.service.ts为组件a.component.ts的提供者时，您随后创建了a.service.ts的新本地实例.在这种情况下，对paramMap的预订与a.component.ts相关联，并且该组件路由的快照确实包含:id参数，因此在调用getid()时会返回给您.

However, when you declare a.service.ts as a provider of the component a.component.ts you then have created a new local instance of a.service.ts' In this scenario the subscription made to paramMap is associated with a.component.ts and the snapshot of that components route does contain an :id param and therefore is returned to you when calling getid().

从角度源代码:

export class ActivatedRoute {
     /** The current snapshot of this route */
       _paramMap: Observable<ParamMap>;
    ...}

>

这篇关于角度激活的路线ParamsMap为空，具体取决于我在提供程序中指定的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！