4

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

为什么会这样。我很难找到有关 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();
  }
}
4

1 回答 1

3

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

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

这会导致其关联组件的路由的快照视图。那时，由于您将 声明a.service.ts为根模块app.module.ts的提供者，因此路由的快照将包含 no :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 源代码：

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

>

于 2018-03-19T20:04:32.407 回答