Question

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

这是路由器的一个例子：

$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。我不确定这是不是最好的主意，主要是因为它看起来很丑陋（虽然效果很好）。

也许我应该使用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'
})

Angular UI Router：仅在不嵌套视图的情况下继承URL（使用parent.child状态）

2 个答案: