Когда некоторые маршруты могут быть доступны и просматриваться только внутри других маршрутов, может быть целесообразно создать их как дочерние маршруты.

Шаг 1: Установите проект Angular 7

Введите следующую команду, чтобы создать его.

ng новое имя вашего проекта

Помните, что вам нужно добавить маршрутизацию приложения, ответив утвердительно на запрос при создании нового проекта.

Теперь установите фреймворк bootstrap css.

npm install bootstrap --save

Добавьте файл Bootstrap в файл angular.json.

"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Следующим шагом является создание одного компонента заголовка. Итак, введите следующую команду.

ng g c header --spec=false

Мы создадим панель навигации внутри этого компонента. Итак, напишите следующий код в файле header.component.html.

Наконец, замените код app.component.html следующим кодом.

Сохраните файл и запустите сервер разработки angular.

ng serve --открыть

Вы увидите панель навигации с тремя элементами навигации.

Итак, здесь один элемент Главная, один элемент О нас и один элемент Сотрудник.

Это означает, что наше приложение имеет два корневых маршрута для дома, около и другие подмаршруты, такие как для модуля сотрудника.

Во время создания проекта мы создали один модуль маршрутизации с именем app-routing.module.ts. Поэтому мы определим корневые маршруты внутри этого файла.

Шаг 2: Добавьте корневые маршруты

Сначала создайте домашний компонент с помощью следующей команды.

ng g c home --spec=false

Теперь добавьте этот компонент в файл app-routing.module.ts.

Итак, здесь мы определили корневые маршруты для нашего углового приложения. Теперь добавьте router-outlet в файл app.component.html, чтобы отобразить содержимое домашнего компонента. Кроме того, добавьте навигационную ссылку в файл header.component.html.

Сохраните файл, перейдите в браузер и щелкните ссылку Главная. Вы видите, что мы видим содержимое файла home.component.html. Итак, мы позаботились о корневых маршрутах. Теперь пришло время создать модуль сотрудника, а также определить подмаршруты модуля сотрудника.

Шаг 3: Создайте модуль сотрудника и компоненты.

Первым шагом является создание модуля, называемого сотрудником. Итак, давайте создадим с помощью следующей команды.

ng g сотрудник модуля

Таким образом, внутри папки приложения будет создана папка с именем employee, а внутри этой папки будет создан файл employee.module.ts.

Следующим шагом является создание трех угловых компонентов, связанных с модулем сотрудника. Итак, давайте сделаем это.

ng g c employee/employee --spec=false

ng g c employee/employee-list --spec=false

ng g c employee/employee-detail --spec=false

Он создаст три папки внутри папки src ›› app ›› employee.

Теперь все эти четыре компонента уже импортированы в файл employee.module.ts.

Теперь нам не нужно импортировать все эти компоненты в файл app.module.ts.

Вместо этого нам нужно импортировать этот файл employee.module.ts внутрь файла app.module.ts.

Итак, все компоненты нашего сотрудника зарегистрированы в приложении angular.

Шаг 4: Создайте маршрут сотрудника.

Теперь внутри папки src ›› app ›› employee мы можем создать файл маршрутизации с именем employee-routing.module.ts и добавить в него следующий код.

Итак, здесь мы определили дочернюю маршрутизацию для модуля сотрудника. Основной путь — это /employee, а его дочерние пути — /employee/list и /employee/detail.

Это означает, что мы определили дочерние маршруты для модуля employee. Теперь осталось только зарегистрировать этот модуль маршрутизации в файле employee.module.ts.

Помните, что файлы employee.module.ts, и employee-routing.module.ts различаются. Вы можете увидеть эту структуру так же, как и нашу корневую структуру проекта angular, например app.module.ts и app-routing.module.ts.

Теперь нам нужно отобразить маршруты. Поэтому добавьте следующий код в файл employee.component.html.

Этот роутер-выход будет отображать только компонент, связанный с модулем employee. Таким образом, он отличается от router-outlet корневой маршрутизации, который все еще находится в файле app.component.html.

Ссылка на маршрутизатор внутри файла header.component.html уже добавлена.

Сохраните файл и в браузере перейдите к http://localhost:4200/employee/list.

Вы можете видеть, что он отображает правильный компонент. Теперь перейдите на http://localhost:4200/employee/detail.

Он также покажет нужный компонент, и теперь наш модуль сотрудника работает.

Вы по-прежнему можете перейти на http://localhost:4200/home, и он отобразит правильный компонент — HomeComponent.

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

Наконец, маршрутизация Angular 7 и дочерняя маршрутизация с примером завершены. Спасибо, что взял.

Удачного кодирования!