Angular：动态路径路由问题

Question

我正在尝试根据 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>

有人可以告诉我我做错了什么吗？谢谢

Answer 1

存在语法错误动态路径应该像 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 {

    }

Angular：动态路径路由问题

Angular: Dynamic path Routing issue

routing

typescript

routerlink

angular