Angular UI路由器多个/命名路由

I have a user layout file that is the template for any user pages:

我有一个用户布局文件,它是任何用户页面的模板:

<div class="user-wrapper">
    <div ui-view="menu"></div>
    <div ui-view="content"></div>
</div>

Depending on the state I want the menu to be different. Such as:

根据状态,我希望菜单不同。如:

    .state('user', {
        url: '/user',
        templateUrl: 'partials/user.html',
        controller: 'userController',
    })

    .state('user.one', {
        url: '/one',
        controller: 'oneController',
        views: {
            "menu": { templateUrl: "partials/client-menu.html" },
            "content": { templateUrl: "partials/one.html" }
        },
    });

    .state('user.two', {
        url: '/two',
        controller: 'twoController',
        views: {
            "menu": { templateUrl: "partials/client-menu.html" },
            "content": { templateUrl: "partials/two.html" }
        },
    });

    .state('user.three', {
        url: '/three',
        controller: 'threeController',
        views: {
            "menu": { templateUrl: "partials/admin-menu.html" },
            "content": { templateUrl: "partials/three.html" }
        },
    });

Now you can see "one" and "two" both use the same menu but "three" uses a different menu. This all works fine but is there a way to avoid duplicating the menu on "one" and "two".

现在您可以看到“一个”和“两个”都使用相同的菜单,但“三个”使用不同的菜单。这一切都很好,但有一种方法可以避免重复“一”和“两”菜单。

Such as making a "user.client" state that uses the "user-menu.html" then "one" would be "user.client.one" instead and only have to specify the content.

例如,使用“user-menu.html”然后“one”的“user.client”状态将改为“user.client.one”而只需指定内容。

I think the main problem is the

我认为主要的问题是

<div ui-view="content"></div>

is on the grandfather of the "user.client.one" so how can it specify the content?

是在“user.client.one”的祖父,所以它如何指定内容?

2 个解决方案

#1

I would say, that the trick is to move the "menu" view definition into parent state "user"

我会说,诀窍是将“菜单”视图定义移动到父状态“用户”

.state('user', {
    url: '/user',
    views: {
      "" : {
        templateUrl: 'partials/user.html',
        controller: 'userController',
      },
      "menu@user": { templateUrl: "partials/client-menu.html" },
     },
     ...

So, what happened? any child state of the "user" will already have the content of the "menu" filled, with the default templateUrl: "partials/client-menu.html"

所以发生了什么事? “user”的任何子状态都已经填充了“menu”的内容,默认的templateUrl:“partials / client-menu.html”

Any other child, can override that...

任何其他孩子,可以覆盖...

.state('user.one', {
    url: '/one',
    controller: 'oneController',
    views: {
        // "menu": already set by parent
        "content": { templateUrl: "partials/one.html" }
     ....

.state('user.two', {
    url: '/two',
    views: {
        // "menu": set in parent
        "content": { templateUrl: "partials/two.html" }
        ...

.state('user.three', {
    url: '/three',
    controller: 'threeController',
    views: {
        // here we override that
        "menu": { templateUrl: "partials/admin-menu.html" },
        "content": { templateUrl: "partials/three.html" }
    ...

Maybe, check this Q & A for some more ideas about multi view nesting:

也许,请查看此问答,了解有关多视图嵌套的更多想法:

multiple ui-view html files in ui-router

ui-router中的多个ui-view html文件

AngularJS ui-router view structure product site

AngularJS ui-router视图结构产品站点

#2

I think a found a solution user the @ for absolute views:

我认为找到一个解决方案用户@的绝对视图:

.state('user', {
    url: '/user',
    templateUrl: 'partials/user.html',
    controller: 'userController',
})

.state('user.client', {
    url: '/client',
    views: {
        "menu": { templateUrl: "partials/client-menu.html" }
    },
})

.state('user.admin', {
    url: '/admin',
    views: {
        "menu": { templateUrl: "partials/admin-menu.html" }
    },
})

.state('user.client.one', {
    url: '/one',
    controller: 'oneController',
    views: {
        "content@user": { templateUrl: "partials/one.html" }
    },
});

.state('user.client.two', {
    url: '/two',
    controller: 'twoController',
    views: {
        "content@user": { templateUrl: "partials/two.html" }
    },
});

.state('user.admin.three', {
    url: '/three',
    controller: 'threeController',
    views: {
        "content@user": { templateUrl: "partials/three.html" }
    },
});

It feels abit cleaner but I'm not sure if its the right approach still.

它感觉更加清洁,但我不确定它是否仍然是正确的方法。

#1