Question

我有一个项目列表应用程序和各种商店，我设法设置默认商店并根据storeId获取商品并构建网址参数/store/3。

我打算做的是在我的模板中显示此locationName storeId说store 3是伦敦，所以我希望显示Collection Store - London之类的内容我设法用它Id来做，但显示Collection Store - 3并没有多大意义。

这是我的nav.component

中的商店

this.sourceSites = [
  {
    'Id': 1,
    'StoreLocation': 'Eastleigh'
  },
  {
    'Id': 2,
    'StoreLocation': 'Portchester'
  },
  {
    'Id': 3,
    'StoreLocation': 'London'
  },
  {
    'Id': 4,
    'StoreLocation': 'Basingstoke'
  }
]

导航模板

<li *ngFor="let store of sourceSites" 
    [class.active-location]="storeId === store.Id  || (storeName === store.StoreLocation)">
  <a [routerLink]="['/order-screen/store/' + store.Id + '/' +store.StoreLocation]">
      {{ store.StoreLocation}}
  </a>
</li>

要显示storeId，我的订单组件

ngOnInit() {
  this.routeSub = this.route.params.subscribe(params => {
     this.storeId = +params['storeId'];
     if (!this.storeId) { 
        this.storeId = DEFAULT_ORIGIN_ID; 
     } 
  })
}

要使用默认Id 3我放export const DEFAULT_ORIGIN_ID = 3。虽然这样做很好，但这仅显示StoreId而是我要显示StoreLocation

我的尝试是添加另一个网址参数/store/3/Location并在我的sharedService中创建另一个export const DEFAULT_ORIGIN_LOCATION = 'London'。并将else if()条件放入ngOnInit

ngOnInit() {
   this.routeSub = this.route.params.subscribe(params => {
      this.storeId = +params['storeId'];
      this.storeName = +params['storeName'];
      if (!this.storeId) { 
         this.storeId = DEFAULT_ORIGIN_ID; 
      } else if (!this.storeName) {
         this.storeName = DEFAULT_ORIGIN_LOCATION;
      }  
    this.getOrdersFromOrigin(this.storeId);
 })
}

但是当我执行此操作时，它会向我显示Collection Store - London但是当我将位置更改为其他位置时，London位置仍然存在。

如何在更改位置时更改DEFAULT_ORIGIN_NAME？

修改的使用子路由时，它现在不会更改URL路径。

{ path: 'order-screen/store/:storeId', component: OrderComponent, 
   children: [
      {
         path: ':storeName',
         component: OrderComponent,  
      }
   ] 
}

Answer 1

当你有像

这样的路线时

routes = [
  { path: '', pathMatch: 'full', redirectTo: '/order-screen/store/3/London'}, 
  { path: 'order-screen/store/:storeId', component: SomeComponent, 
       children: [...] }
];

那么你的代码应该可以工作。

Angular2获取Url参数并将其显示在模板上

1 个答案: