Angular:动态路径路由问题

时间:2019-04-24 09:38:52

标签: angular typescript routing routerlink

我试图基于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>

有人可以告诉我我在做什么错吗?谢谢

1 个答案:

答案 0 :(得分:2)

存在语法错误  动态路径应类似于path /:id  尝试一下

appWidgetManagr.requestPinAppWidget(provider_1, null, callback1); // this one is ignored...
appWidgetManagr.requestPinAppWidget(provider_2, null, callback2); // this one is called