Angular ui 路由器可选 url 参数

Posted 2023-02-22

【中文标题】Angular ui 路由器可选 url 参数

【英文标题】：Angular ui router optional url params

【发布时间】：2016-07-17 13:32:04

【问题描述】：

我已经为我的商店应用程序定义了状态，但我不确定我做得对。由于我在 url 中有多个可选参数，我不确定我应该如何实现它。

.state('app.products', 
    abstract: true,
    views: 
        'content@': 
             templateUrl: 'app/products/views/product.html'
         ,
         '[e-mail]': 
             templateUrl: 'app/products/views/product-header.html'
          
    
)

以上是我对产品页面的抽象视图。产品将分为男性/女性以及以下子类别：

www.example.com/man/

www.example.com/man/footwear/

www.example.com/man/footwear/shoes

Man、footwear 和shoes 都是可选的，因为man 参数可以是woman，footwear 可以是cloth（最后一个参数可以是例如shirts）并且所有可能的以上的组合。

我不确定是否必须分别制作每个状态，或者我可以用除此之外的其他状态来处理所有这些？

请注意，product header 与此处无关，如果需要良好的结构来删除它，我当然可以这样做。

我只是在网上找不到类似的东西，所以如果有人有的话，链接也会很有帮助。

【参考方案1】：

我最近通过将每个子类别状态嵌套到其父类别状态做了非常相似的事情。这样做的一些好处是，您不必在子状态中重复大量已在父状态中定义的代码，也不必重新加载已在父状态中加载的数据和视图.

下面是一个帮助您入门的示例：

.state('app.products', 
  abstract: true,
  url: '/products',
  views: ...
)
.state('app.products.gender', 
  url: '/:gender',
  views: ...
)
.state('app.products.gender.category', 
  url: '/:category',
  views: ...
)
.state('app.products.gender.category.type', 
  url: '/:type',
  views: ...
)

首先，urls 会在子状态下自动堆叠。这意味着您只需为每个子状态定义一个 url 参数，并且您仍然会得到像 /app/products/:gender/:category/:type 这样的 url。

这样做的第二个好处是在父状态中定义的视图会自动包含在其所有子状态中，除非您明确覆盖它：

.state('app.products.gender.category', 
  url: '/:category',
  views: 
    'foo@someParentState': templateUrl: 'foo.html',
    'bar@someParentState': templateUrl: 'bar.html'
  
)
.state('app.products.gender.category.type', 
  url: '/:type',
  views: 
    // foo.html is still rendered here
    // bar.html is replaced by baz.html
    'bar@someParentState': templateUrl: 'baz.html'
  
)

从这个示例中看到的另一个好处是，当状态更改为 app.products.gender.category.type 时，foo.html 不会被重新加载。例如，假设 foo.html 在该类别中有一个很长的滚动类型列表。如果用户单击列表中的某个项目，将状态从app.products.gender.category 更改为子状态app.products.gender.category.type，则不会重新加载 foo 的长滚动列表，用户仍然可以看到他们单击的项目。另一方面，如果该单击将状态更改为非子状态，则列表可能已重新加载（数据和所有），并且用户可能必须滚动才能查看他们单击的项目。

一些建议：

保持嵌套状态名称简短。 仅在绝对必要时才在层次结构中包含状态（我正在查看您的 app.products！）。 这种技术有很多可能出错的地方，因此请务必查看 ui-router docs 以了解有助于减少编码的配置。

【讨论】：

谢谢，很好的建议，虽然我想避免这么多状态，但现在似乎好多了。我将 app.products 状态添加为抽象并将 url 定义为：'?page,brands，因为所有子项（您在上面写的那个）都将具有这些可选参数。这是在抽象状态上定义可选查询参数的正确方法吗？当然我添加了参数： page: value: '1', squash: true ,brands: value: null, squash: true 。