Question

我已经设置了我的状态如下，因为你可以看到第一个状态是抽象的，所有第二级状态（列表，编辑和新）加载完美，但我的第三级状态（乘客）没有加载，它保持在编辑状态UI。我可能做错了什么。

这是链接到plunker，点击联系人，然后第一次联系，你会看到一个链接＆＃34;消息＆＃34;，如果你点击它，它将不会改变任何东西。

function config($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('trips', {
            parent: 'app',
            abstract: true,
            url: '/trips',
            data: {
                role: ['Administrators']
            }
        })
        .state('trips.list', {
            url: '',
            component: 'tripList'
        })
        .state('trips.trip-edit', {
            url: '/{id:[0-9]+}',
            component: 'tripEdit',
            onEnter: function () {
                console.log("entering trips.trip-edit");
            },
            onExit: function () {
                console.log("exiting trips.trip-edit");
            }
        })
        .state('trips.trip-edit.passengers', {
            url: '/passengers',
            //component: 'tripPassengers', using views below
            views: { '@app': { template: '<trip-passengers />' } },
            onEnter: function () {
                console.log("entering trips.trip-edit.passengers");
            },
            onExit: function () {
                console.log("exiting trips.trip-edit.passengers");
            }
        })
        .state('trips.trip-new', {
            url: '/new',
            component: 'tripNew'
        });
};

@ramon答案很好，但我解决了它，通过在乘客状态下添加视图部分进行了修改，并且我的组件自动接线。

Answer 1

当您使用角度ui路由器状态时，您需要了解一个概念。

所有州都将尝试在父视图中渲染，但是当您嵌套状态时，您可能会遇到父视图中没有该组件的问题。

例如：您的trips.trip-edit州可能没有trips.trip-edit.passengers呈现的位置。

做了一个你的plunker的叉子，使它工作

http://plnkr.co/edit/wT6rTPAvmfjnrNbt0WFk?p=preview

我在这里匆匆忙忙，让我试着在这里解释相关部分。

首先，我将index.html ui-view更改为命名视图＆＃39;，当我们传递该ui-view的名称ui-view="main"时，所以我称它为主

然后我们必须在所有路径（状态）中指定其模板将呈现的视图。

views: {
  'main' : {
    templateUrl: ...,
    controller: ...
  }
}

请注意，在嵌套视图中，我必须放置一个AT（@）。

views: {
  'main@' : {
    templateUrl: ...,
    controller: ...
  }
}

@告诉angular要从你的根开始寻找一个主要的，因为在@之后没有任何东西，它是一个绝对的路径。当你不使用@时，它是一条相对路径。在docs

中可以更好地解释一下

因此，如果您想在about.html内的另一个命名视图内渲染视图，例如，您可以执行以下操作

views: {
  'another@about' : {
    templateUrl: ...,
    controller: ...
  }
}

这将在州内模板中查找ui-view="another"，即about.html

多级嵌套状态不加载模板

1 个答案: