Angular 5 ParamMap не работает на app.component.ts

Question

Я хочу получить идентификатор из параметров маршрута, но он возвращает ноль в качестве значения.

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {    
  constructor(private route: ActivatedRoute) { }

    ngOnInit(){  
    const id = this.route.snapshot.paramMap.get('idC');
    console.log(id);
}

routing.ts:

{ path: 'profile/:idC', component: AccountComponent }

Цель кода на app.component состоит в том, что я использую панель навигации наприложение, поэтому, когда пользователь подключен, ожидаемый результат состоит в том, чтобы получить идентификатор из маршрута, чтобы на панели навигации отображалось «Добро пожаловать, пользователь1».Любое решение?

Answer 1

Вы также можете получить params value без service

constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit() {

 this.router.events.subscribe((event: any) => {
    let r = this.route;
    while (r.firstChild) {
        r = r.firstChild
    }
    r.params.subscribe(params => {
        console.log(params.idC);
    });
  });

}

Answer 2

Вы можете выбрать idC из вашего AccountComponent и присвоить значение свойству внутри службы.

account.component.ts

constructor(private route: ActivatedRoute, myService: MyService) { }

ngOnInit(){  
  const id = this.route.snapshot.paramMap.get('idC');
  this.myService.id = id;
  console.log(id);
}

Получите доступ к той же службе из вашего AppComponent и используйте эту переменную внутри вашего HTML.

Например, внутри вашего app.component.ts

constructor(private route: ActivatedRoute, myService: MyService) { }

и вашего app.component.html

<p>ID: {{myService.id}}</p>