Angular UI Router：仅继承 URL（使用 parent.child 状态）而不嵌套视图

Question

我想在 UI 路由器中使用 parent.child 表示法继承状态/URL。我不想继承视图（或将视图嵌套在其他视图中），也不想继承控制器，我只想继承 URL。我使用 'ui.router' 作为依赖项。

这是一个路由器的例子：

$stateProvider
.state('products', {
    url: '/products',
    templateUrl: 'view1.html',
    controller: 'products#index'
})

.state('products.show', {
    url: '/:id',        
    templateUrl: 'view2.html',
    controller: 'products#show'
})

.state('products.buy', {
    url: '/:id/:moreParams',
    templateUrl: 'view3.html',
    controller: 'products#buy'
})

.state('products.sell', {
    url: '/:id/:moreParams/:moreParams',
    templateUrl: 'view4.html',
    controller: 'products#sell'
});

控制器是：

angular.module('productsModule', [])

.controller('products#index', function($scope){
})
.controller('products#show', function($scope){
})
.controller('products#buy', function($scope){
})
.controller('products#sell', function($scope){
})

在这里，所有视图都是完全不同的，我不想将任何视图嵌套在任何其他视图中。另外，所有的控制器也是不同的，我不想继承控制器，它们都是分开的，功能不同。

这是我的预期结果。我想要实现的是 Angular 允许我只继承 URL，因此 URL 变为：

/products
/products/:id
/products/:id/:moreParams
/products/:id/:moreParams/:moreParams

（然后让每个 URL 都有自己的视图和控制器，如上所述）

到目前为止它不起作用，我的研究开始告诉我，这种使用 parentState.childState 的继承仅适用于您想要嵌套视图时（这是我不想要的。我只想重复使用 URL）。

我的解决方法是创建像products_show 这样的路由器 URL，也就是说，使用下划线而不是点，因此它们被视为新的独立 URL，而不是继承 URL。我不确定这是否是最好的主意，主要是因为它看起来很丑（尽管它工作得很好）。

也许我应该只使用products_show，以防它不能用点来完成？想法？

Answer 1

您可以在路由之间建立父子关系，而无需嵌套各自的视图。您可以通过为您的视图指定一个绝对目标来实现这一点。像这样：

$stateProvider
.state('products', {
    url: '/products',
    templateUrl: 'view1.html',
    controller: 'products#index'
})

.state('products.show', {
    url: '/:id',
    views: {'@': {
      templateUrl: 'view2.html',
      controller: 'products#show'
    }}
})

.state('products.buy', {
    url: '/:id/:moreParams',
    views: {'@': {
      templateUrl: 'view3.html',
      controller: 'products#buy'
    }}
})

.state('products.sell', {
    url: '/:id/:moreParams/:moreParams',
    views: {'@': {
      templateUrl: 'view4.html',
      controller: 'products#sell'
    }}
});

通过这样做，您基本上是在告诉 ui-router 在主 index.html 中未命名的ui-view 内呈现您的视图，从而覆盖父视图。而不是在父视图的模板中寻找ui-view。

要了解为什么会这样，您必须了解 ui-router 如何决定在哪里为您的路线呈现视图。因此，例如，当您这样做时：

.state('parent.child', {
    url: '/:id',
    templateUrl: 'child-view.html',
    controller: 'ChildCtrl'
})

ui-router 默认会将其转换为：

.state('parent.child', {
    url: '/:id',
    views: {'@parent': {
      templateUrl: 'child-view.html',
      controller: 'ChildCtrl'
    }}
})

这将导致它在父视图模板中查找未命名的 ui-view 并在其中呈现子视图的模板。 您还可以为一条路线指定多个视图，例如：

.state('parent.child', {
    url: '/:id',
    views: {
      '@parent': {
        templateUrl: 'child-view.html',
        controller: 'ChildCtrl'
      },
      'sidebar@parent': {
        templateUrl: 'child-view-sidebar.html',
        controller: 'ChildViewSidebarCtrl'
      }
    }
})

在这种情况下，child-view.html 将像以前一样在父视图的未命名 ui-view 内呈现。此外，它还会在父视图的模板中查找ui-view="sidebar"，并在其中渲染child-view-sidebar.html。

有关此强大的views 选项以及如何为您的视图指定目标的更多信息，请参阅ui-router docs

Answer 2

这是嵌套状态的写法：

$stateProvider
.state('products', {
    url: '/products',
    templateUrl: 'view1.html',
    controller: 'products#index'
})

.state('products.show', {
    parent:'products',
    url: '/:id',        
    templateUrl: 'view2.html',
    controller: 'products#show'
})