Как мне справиться с маршрутизацией с вложенным модулем в Angular - PullRequest
Новая
       22

Как мне справиться с маршрутизацией с вложенным модулем в Angular

0 голосов
/ 01 октября 2019

Я пытаюсь обработать маршрутизацию с вложенными модулями в Angular наилучшим образом.

Допустим, я запускаю приложение с URL localhost: 5000. Я должен видеть HomeComponent с некоторым содержанием на левой стороне, а на правой стороне у меня есть <router-outlet>, где должно быть отображено ContactComponent. Если я перейду на localhost: 5000 / info, то ContactComponent следует заменить на InfoComponent. Как я могу добиться этого?

Это то, что у меня так далеко: https://stackblitz.com/edit/angular6-material-components-demo-jb9y3u?file=src/app/home/home-routing.module.ts

(ContactComponent не рендерится, и если я перехожу на localhost: 5000 / info, то InfoComponentбудет отображаться в <router-outlet> из AppComponent

И изображение для лучшего объяснения:

enter image description here

Ответы [ 3 ]

3 голосов
/ 01 октября 2019

Попробуйте это в app-routing.module 

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
    children: [
      {
        path: "",
        component: ContactComponent,
      },
      {
        path: "info",
        component: InfoComponent,
      },
    ]
  },
];
1 голос
/ 01 октября 2019

У вас были проблемы с маршрутами. Вы должны узнать больше об использовании детского свойства маршрута.

Также обратите внимание на ссылку pathMatch

: https://stackblitz.com/edit/angular6-material-components-demo-rfeaup

Отвечая на комментарий, да, я был добавленотложенная загрузка. В противном случае я не вижу смысла использовать этот модуль. Ленивый модуль - это функциональный модуль, который разделяет часть функциональности приложения. Если вы используете ленивые модули, для клиента это несколько лучше, потому что клиент должен ждать не все загруженное приложение, а ядро.

Подробнее о ленивой загрузке в приложении Angular: https://angular.io/guide/lazy-loading-ngmodules

Ну, а про «Дети» - «содержатся все дочерние маршруты, активированные по текущему маршруту» - согласно официальной документации.

Полагаю, вы также найдете это полезным: https://angular.io/guide/router#child-route-configuration

0 голосов
/ 01 октября 2019

Теперь у вас нет цели для роутера верхнего уровня (в AppComponent). Если бы у него была цель (сопоставить HomeComponent, скажем, с «/ home»), то вы могли бы сопоставить второй маршрут во втором маршрутизаторе-розетке с некоторыми дочерними элементами «домашнего» маршрута (ContactComponent => '/ home / contact'and InfoComponent =>' /home/info').

...