Angular Activated Route ParamsMap 为空，具体取决于我在提供程序中指定服务的位置

Question

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

为什么会这样。我很难找到有关 ActivatedRoute 如何确定范围以及它如何与服务交互的好信息。

链接到 plnkr 中的此行为。取消注释 a.component.ts 中的第 11 行(providers 字段)以在您单击我时查看它是否正常工作!
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();
  }
}

Answer 1

您看到的行为是由于 paramMap 的性质造成的。激活路由中的成员。在您的服务构造函数中，您订阅了 paramMap

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

结果是 快照其关联组件的路线 View 。那时，自从您声明了 a.service.ts作为您的根模块的提供者 app.module.ts路线快照将不包含 :id , 因为它关联的组件是你的 app.component.ts .因此，当您调用您的方法时

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

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

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

来自 Angular source code :

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

>