如何在AngularJS上延遲加載ui-router命名視圖？

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
        },
    }
};