Как лениво загрузить ui-роутер по имени views на AngularJS? - PullRequest
Новая
       40

Как лениво загрузить ui-роутер по имени views на AngularJS?

0 голосов
/ 09 января 2019

Весь этот код работает, но каждое состояние заменяет пользовательский интерфейс своим собственным содержимым. Я хотел бы иметь только одно представление (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

1 Ответ

0 голосов
/ 11 января 2019

Я думаю, что лучшим подходом будет просто иметь переключатели для каждого из этих компонентов, чтобы их можно было показать или скрыть с помощью ng-if.

Я не думаю, что это хорошая идея делать это с именованными представлениями, потому что это становится сложным. Если вы действительно хотите изучить этот вариант, взгляните на приведенный ниже код, чтобы понять, как он может работать. С этим подходом усложняется то, что у вас должно быть состояние для каждой комбинации компонентов, которые могут быть показаны одновременно. Я приведу 1 пример состояния, которое показывает все 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
        },
    }
};
...