Ich versuche, die Routenparameter zu verwenden, kann dies aber nicht erreichen, da beim Importieren der Routenparameter Fehler auftrete

Meine Vorlage,

    <h6 class="headingh6 nobottommargin"><a [routerLink]="['User',{{detail.firstname}}]">  {{detail.firstname}} </a></h6>

Meine Komponente

import { Component,OnInit} from '@angular/core';
import { Route, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
selector: 'User', 
templateUrl: './components/society/society.html',
Directives: [ROUTER_DIRECTIVES]
})
export class User  {
id:any;
 constructor(routeSegment: RouteSegment) {
   this.id = routeSegment.getParam('id'); 
   console.log(this.id);   
 }
}

Kann mir jemand helfe

Meine Routen

   import {provideRouter, RouterConfig} from '@angular/router';

  import {DemoPage} from './demo-page';

  import {User} from './components/user/user';


   export const routes: RouterConfig = [
   { path: '', redirectTo: '/login', terminal: true },
   { path: 'login', component:Login },
   { path: 'signup', component:SignUp },
   { path: 'demo', component: DemoPage, children: [
     { path: 'user', component:User },
     { path: 'requests', component:Requests },
   ]}
];

 export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)


  ];