Question

所有这些代码均有效，但是每个状态都将ui-view替换为其自己的内容。我只想拥有一个视图（home.html），然后将每个状态视图附加到该父视图中。我将仅发布homeComponent和aboutComponent，其他子组件几乎相同。

/*HomeComponent (parent)*/ 
const homeIndex = {
      name: "home",
      url: "/home",
      component: "homeComponent",
      lazyLoad: ($transition$) => {
        const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
        return import("./index/index.module")
          .then(mod => $ocLazyLoad.load(mod.HOME_INDEX_MODULE))
          .catch(err => {
            throw new Error("Ooops, something went wrong, " + err);
          });
      }
    };

/*AboutComponent, NewsComponent and ContactComponent (childs)*/
const homeAbout = {
  name: "home.about",
  component: "homeAboutComponent",
  lazyLoad: ($transition$) => {
    const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
    return import("./about/about.module")
      .then(mod => $ocLazyLoad.load(mod.HOME_ABOUT_MODULE))
      .catch(err => {
        throw new Error("Ooops, something went wrong, " + err);
      });
  }
};

我想一种可能的解决方案是创建一个名为ui-views的状态并使状态将每个组件加载到其中，但是我无法弄清楚。

我尝试将views: {}添加到状态中，但是会引发错误。

也许这张照片有助于了解我想要实现的目标。

https://i.stack.imgur.com/od3Fy.png

Answer 1

我认为最好的方法就是为每个组件设置切换，以便可以使用ng-if显示或隐藏它们。

我认为对命名视图执行此操作不是一个好主意，因为它变得复杂。如果您确实想探索该选项，请查看下面的代码以获取有关其工作方式的线索。这种方法使事情变得复杂的是，您必须对可以同时显示的每种组件组合都有一个状态。我将给出一个显示所有3的状态的示例：

parent.component.html

<div ui-view="content1"></div>
<div ui-view="content2"></div>
<div ui-view="content3"></div>

routes.js

const homeIndex = {
    name: "home",
    url: "/home",
    component: "homeComponent",
    lazyLoad: ($transition$) => {
        const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
        return import("./index/index.module")
            .then(mod => $ocLazyLoad.load(mod.HOME_INDEX_MODULE))
            .catch(err => {
                throw new Error("Ooops, something went wrong, " + err);
            });
        }
};

// Example: show all 3 at once
const homeAbout= {
    name: "home.about",
    views: {
        'content1@home': {
            component: 'homeAboutComponent',
            lazyLoad: ($transition$) => {
                const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
                return import("./about/about.module")
                .then(mod => $ocLazyLoad.load(mod.HOME_ABOUT_MODULE))
                .catch(err => {
                    throw new Error("Ooops, something went wrong, " + err);
                });
            }
        },
        'content2@home': {
            component: 'homeNewsComponent',
            // lazy load
        },
        'content3@home': {
            component: 'homeContactsComponent',
            // lazy load
        },
    }
};

如何在AngularJS上延迟加载ui-router命名视图？

1 个答案: