Пример маршрутизации и подмаршрутизации Angular 9

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

Маршрутизация означает переход между страницами. Вы видели множество веб-сайтов со ссылками, которые направляют вас на новую страницу. Это может быть достигнуто с помощью маршрутизации.

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

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

Мы рассмотрим пример того, как мы можем создать корневой маршрут и дочерние маршруты в этой маршрутизации angular 9 и суб-маршрутизации. учебник с примером.

Учебник по маршрутизации и суб-маршрутизации Angular 9

Теперь первое, что нужно сделать, это создать Angular 9 проект.

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

Шаг 1. Установите Angular 9 Project

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

 ng new angroute 

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

Теперь установите CSS-фреймворк начальной загрузки.

 npm install bootstrap --save 

Добавьте файл начальной загрузки в файл 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 --open 

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

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

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

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

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

Во-первых, создайте домашний компонент с помощью следующей команды.

 ng gc home --spec = false 

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

//app-routing.component.tsimport {NgModule} из '@ angular/core'; импорт {Routes, RouterModule} из '@ angular/ router '; импортировать {HomeComponent} из' ./home/home.component';const routes: Routes = [{path: 'home', component: HomeComponent}]; @ NgModule ({import: [RouterModule.forRoot (routes)  ], exports: [RouterModule]}) класс экспорта AppRoutingModule {} 

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

Также добавьте ссылку навигации в файл header.component.html .

Главная страница

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

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

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

 ng g module student 

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

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

 ng gc student/student --spec = falseng gc student/student-list --spec = falseng gc student/student-detail --spec = false 

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

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

//student.module.tsimport {NgModule} из '@ angular/core'; импорт {CommonModule} из '@ angular/common'  ; импортировать {StudentComponent} из './student/student.component'; импортировать {StudentListComponent} из' ./student-list/student-list.component '; импортировать {StudentDetailComponent} из' ./student-detail/student-detail  .component '; @ NgModule ({объявления: [StudentComponent, StudentListComponent, StudentDetailComponent], импорт: [CommonModule]}) экспортный класс StudentModule {} 

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

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

//app.module.tsimport {BrowserModule} из '  @ angular/platform-browser '; импортировать {NgModule} из' @ angular/core '; импортировать {AppRoutingModule} из' ./app-routing.module '; импортировать {StudentModule} из' ./student/student.module ';  импортировать {AppComponent} из './app.component';import {HeaderComponent} из' ./header/header.component';import {HomeComponent} из './home/home.component'; @ NgModule ({декларации: [  AppComponent, HeaderComponent, HomeComponent], импорт: [BrowserModule, AppRoutingModule, StudentModule], провайдеры: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

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

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

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

//student-routing.module.tsimport {NgModule} from '@ angular/core'; import {Routes, RouterModule} из '@ angular/router';  импортировать {StudentComponent} из './student/student.component'; импортировать {StudentListComponent} из' ./student-list/student-list.component '; импортировать {StudentDetailComponent} из' ./student-detail/student-detail.  компонент '; const маршруты: Routes = [{путь:' студент ', компонент: StudentComponent, дети: [{путь:' список ', компонент: StudentListComponent}, {путь:' деталь ', компонент: StudentDetailComponent}]}];  @NgModule ({import: [RouterModule.forChild (routes)], exports: [RouterModule]}) класс экспорта StudentRoutingModule {} 

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

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

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

//student.module.tsimport {NgModule} из '@ angular/core'; импорт {CommonModule} из '@ angular/common'; импорт {StudentRoutingModule} из './student-routing.module';  импортировать {StudentComponent} из './student/student.component'; импортировать {StudentListComponent} из' ./student-list/student-list.component '; импортировать {StudentDetailComponent} из' ./student-detail/student-detail.  component '; @ NgModule ({объявления: [StudentComponent, StudentListComponent, StudentDetailComponent], импорт: [CommonModule, StudentRoutingModule]}) экспортный класс StudentModule {} 

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

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

Кроме того, теперь добавьте ссылка на маршрутизатор внутри файла header.component.html .

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

Вы видите, что он отображает правильный компонент. Теперь перейдите на

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

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

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

Резюме Angular Routing

1. Вы добавили маршрутизатор Angular для навигации между различными компонентами.
2. Вы превратили AppComponent в оболочку навигации с помощью ссылки и .
3. Вы настроили маршрутизатор в AppRoutingModule .
4. Вы настроили маршрутизатор в модуле
5. Вы определили простые маршруты, маршрут перенаправления.
6. Вы использовали routerLink в элементах привязки.

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

Код Github