Блог

Я пытаюсь перейти к подробному компоненту на основе щелчка внутри ngFor. Но приложение переходит на домашнюю страницу, как будто маршрутизатор не существует

HTML

 <div class="campaigns">
  <div class="campaign" style="width:50%" *ngFor="let campaign of campaignList;">
    <a [routerLink]="['/offer-detail',campaign.id]" routerLinkActive="active">
      <p>
        <span>{{campaign.value}}{{campaign.symbol}}</span>
      </p>
      <div class="logo">
        <img src='{{campaign.perk_logo}}'>
      </div>
    </a>
  </div>

  <!-- <div class="campaign" *ngFor="let campaign of campaignList">
  <mat-card >

  </mat-card>
  </div> -->
</div>
  

Router.TS

 const appRoutes: Routes = [
   //etc
    { 
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard]
    },
    {
        path: 'offer-detail:/id',
        component: OfferDetailComponent
    },

    { 
        path: '**',
        redirectTo: '/'
    },

];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
})
export class AppRoutingModule {

}
  

Проверяемый элемент

 <a _ngcontent-c9="" routerlinkactive="active" ng-reflect-router-link="/offer-detail,07704540-6052-11" ng-reflect-router-link-active="active" href="/offer-detail/07704540-6052-11e9-9cc3-f302dba8f944"><p _ngcontent-c9=""><span _ngcontent-c9="">50%</span></p><div _ngcontent-c9="" class="logo"><img _ngcontent-c9="" src="https://clube-newcore.s3.us-west-2.amazonaws.com/perks-logo/dOsrfguX7YogFB6k.png"></div></a>
  

Может кто-нибудь сказать мне, что я делаю не так? Спасибо

существует синтаксическая ошибка, динамический путь должен быть похож на path/:id попробуйте

   const appRoutes: Routes = [
       //etc
        { 
            path: 'home',
            component: HomeComponent,
            canActivate: [AuthGuard]
        },
        {
            path: 'offer-detail/:id',
            component: OfferDetailComponent
        },

        { 
            path: '**',
            redirectTo: '/'
        },

    ];

    @NgModule({
        imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
        exports: [RouterModule]
    })
    export class AppRoutingModule {

    }