Роутинг в angular 7?

В Angular 7 роутинг является одной из самых важных функциональных возможностей. Роутинг позволяет навигироваться по различным компонентам или страницам приложения без необходимости перезагрузки всей страницы. В этом ответе я расскажу о том, как настроить роутинг в Angular 7.

Прежде всего, для использования роутинга в Angular 7 необходимо импортировать несколько модулей из пакета @angular/router. Одним из таких модулей является RouterModule, который предоставляет необходимые директивы и сервисы для настройки роутинга.

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

Вот пример содержимого файла app-routing.module.ts, где определены два маршрута:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В этом примере определены два маршрута. Первый маршрут имеет пустой путь ('') и связан с компонентом HomeComponent. Второй маршрут имеет путь about и связан с компонентом AboutComponent. При переходе на путь '' будет отображаться компонент HomeComponent, а при переходе на путь about будет отображаться компонент AboutComponent.

Затем вы должны обновить основной модуль вашего приложения (app.module.ts), чтобы использовать созданный роутер и его конфигурацию. Для этого вам нужно импортировать AppRoutingModule и добавить его в раздел imports, как показано ниже:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь ваше приложение готово к использованию роутинга. Вы можете добавить директиву router-outlet в шаблон вашего компонента верхнего уровня (app.component.html), чтобы определить место, где будут отображаться компоненты, связанные с маршрутами. Вот пример содержимого app.component.html:

<h1>My App</h1>
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

В этом примере мы создали простую навигационную панель с двумя ссылками, которые связаны с маршрутами HomeComponent и AboutComponent. Компоненты, связанные с этими маршрутами, будут отображаться внутри router-outlet.

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