В Angular версии 8.2.14 для прописывания путей в routing используется модуль RouterModule
из пакета @angular/router
. Чтобы корректно настроить пути в Angular routing, вам потребуется выполнить несколько шагов:
1. Импортируйте необходимые модули и компоненты, включая RouterModule
и все компоненты, которые вы хотите связать с определенными путями. Например:
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home.component'; import { AboutComponent } from './about.component';
2. Определите массив объектов Routes
, в котором пропишите пути и связанные с ними компоненты. Каждый объект содержит следующие свойства:
- path
- строка, представляющая путь для маршрутизации.
- component
- компонент, который будет отображаться при достижении указанного пути.
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, ];
3. Используйте метод RouterModule.forRoot()
для настройки главного модуля маршрутизации. Этот метод принимает массив объектов Routes
и возвращает сконфигурированный модуль маршрутизации.
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
4. Импортируйте класс AppRoutingModule
в главный модуль вашего приложения. Это позволит использовать настроенный маршрутизатор в вашем приложении.
import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [AppRoutingModule], // ... }) export class AppModule { }
5. Добавьте router-outlet
в шаблон главного компонента вашего приложения. Этот тег является контейнером, в котором будет отображаться текущий компонент, связанный с маршрутом.
<router-outlet></router-outlet>
Теперь у вас должна быть настроена базовая маршрутизация в вашем приложении Angular версии 8.2.14. Вы можете добавить дополнительные параметры к объекту маршрута, такие как redirectTo
, чтобы перенаправить пользователя на другую страницу, или pathMatch
, чтобы указать, что путь должен быть полным совпадением.
Пример использования redirectTo
:
const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, ];
Теперь, если вы введете пустой URL, вы будете перенаправлены на /home
.
Надеюсь, что эта информация поможет вам настроить пути в Angular routing версии 8.2.14. Удачи!