角度路由器不选择子状态(嵌套状态）

angular router does not select child state (nested states)

本文关键字：状态 嵌套 选择 路由器      更新时间：2023-09-26

我在添加到我们网站上的新状态时遇到问题。

简短描述我有一个状态（/页面）'q.explorer'，其中包含一个按钮;单击时，它应该进入子状态（名为"q.explorer.detail"），但它没有。但是：在日志记录中，我看到它确实尝试转到该（/state），并且新 url 的格式为子状态中定义的格式。但是实际使用的模板和控制器仍然是包含按钮的"父"......

解释起来可能有点令人困惑;所以我也添加了一些代码，希望这能澄清我的问题。

设置如下所示：

$stateProvider        
   .state('q', {
       url: '/:locale/app',
       data : { ui: "V2" },
       views: {
           'application' : {template: '<div ui-view=""><page-home-v2></page-home-v2></div>' }
       }, controller: function($scope, $stateParams, siteNavigation) {
           siteNavigation.applyUrlParameters($stateParams);
       }
   }).state('q.explorer', {
       url: '/explorer?:year&:month&:guide',
       template: '<page-explorer-v2></page-explorer-v2>',
       controller: function($scope, $stateParams, siteNavigation) {
           console.log("controller: qlaro.explorer");
           siteNavigation.applyUrlParameters($stateParams);
       }
   }).state('q.explorer.detail', {
       url: '/detail',
       template: '<page-explorer-detail-v2></page-explorer-detail-v2>',
       controller: function($scope, $stateParams, siteNavigation) {
           console.log("controller: qlaro.explorer.detail");
           siteNavigation.applyUrlParameters($stateParams);
       }
   })

angular
    .module('q.components')
    .service('siteNavigation', function($state, $location) {
        var service = this;
        service.applyUrlParameters = function($stateParams) {                
            if (!$stateParams) $stateParams = $state.params;
            console.log('Apply state parameters for state: ' + $state.current.name);
            console.log('URL >> ' + $location.url());
        };
    };
在"q.explorer"

模板深处的某个地方，有一个按钮可以打开详细信息视图（"q.explorer.detail"）。它使用以下代码：

function goToDetail() {
    var ui = $state.current.data.ui;
    if (ui === "V1") { /*...*/ }
    else if (ui === "V2") {
        var params = {
            year: Store.getYear(),
            month: Store.getMonth(),
            locale: Store.getLocale()
        }
        var guide = Store.getActiveSidebarItem();
        if (guide) params.guide = guide.slug;
        console.log("go to explorer: " + params.guide);
        $state.go('q.explorer.detail', params);
    }
    else console.log("Unable to go to state because the ui version is not known.");
}

这是我单击链接后在控制台中看到的内容：

go to explorer: ebit
controller: q.explorer
Apply state parameters for state: q.explorer.detail
URL >> /nl/app/explorer/detail?year=2015&month=11&guide=ebit

如您所见，它使用"父"的控制器 iso 我要打开的子页面。即使 state.current.name 美元是正确的...或者也许我应该说它不会从状态改变......

欢迎任何帮助。

（PS：我们使用的是 Angular 1.4.9）

看起来您正在使用嵌套状态，因此q.explorer.detail是q.explorer的子级。若要呈现子状态的模板，还需要一个特定的ui-view，可以将其放入其中。这将在父州的模板中进行搜索。获取 console.log（） 输出只是意味着控制器被实例化，但如果模板根本没有呈现，也会发生这种情况。

因此，请检查q.explorer状态的模板中是否有ui-view。有关更多详细信息，请参阅：https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

您也可以通过不使q.explorer.detail成为q.explorer的孩子来解决此问题。只要您需要点表示法，就会立即创建子状态。

> Yoy 必须在嵌套视图 'q.explorer.detail' 状态的模板入口点中添加某处，否则将不会调用子控制器。

例如：

template: '<page-explorer-v2></page-explorer-v2><ui-view></ui-view>',

而不是

template: '<page-explorer-v2></page-explorer-v2>'

参见 jsfiddle： http://jsfiddle.net/jcpmsuxj/42/

更新。正如@ajaegle提到的，您应该访问官方文档页面：https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

相关文章：