Angular Activated Route ParamsMap пусто в зависимости от того, где я указываю услугу в провайдере

Question

Я использую ActivatedRoute, чтобы получить параметр из моего маршрута во внедренном сервисе. Если я указываю службу в качестве поставщика в модуле приложения или компоненте приложения, карта параметров будет пустой при вызове. Если я указываю его в качестве поставщика в компоненте, который извлекает службу, у него есть параметр.

Почему это работает так? У меня возникли проблемы с поиском полезной информации о том, как работает область действия ActivatedRoute и как она взаимодействует со службами.

Ссылка на это поведение в плнкр. Раскомментируйте строку 11 (поле провайдеров) в a.component.ts, чтобы она работала, когда вы нажимаете на меня! 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 участник в ActivatedRoutes. В вашем сервисном конструкторе вы подписываетесь на paramMap

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

В результате получается привязка снимка маршрута к соответствующему компоненту. На тот момент, так как вы объявили 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:

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

>