Загрузка подстановочного знака для каждого маршрута в угловых

Question

Я добавил маршрутный символ в мое приложение в угловых. Проблема заключается в добавлении подстановочного знака.

Я не уверен, в чем проблема! ниже id массив маршрутов:

const appRoutes: Routes = [
    { path: 'login', redirectTo: '/login', pathMatch: 'full' },
    { path: 'settings', redirectTo: '/settings', pathMatch: 'full' },        
    { path: '**', component: PageNotFoundComponent }       
];

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

Но теперь каждый URL-адрес перенаправляется на PageNotFoundComponent.

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

Пожалуйста, руководство! Спасибо

Answer 1

Маршрут подстановочного знака должен быть последним в массиве. Прямо сейчас, когда ваше приложение загружается, путь пуст, поэтому маршрутизатор направляется к первому определенному пути, который совпадает с маршрутами приложения, то есть с подстановочным маршрутом. Когда вы изменяете порядок так, что маршрутный символ является последним, при загрузке вашего приложения оно увидит, что ему нужно перенаправить для входа в систему по пустому пути, ДО того, как он увидит маршрутный символ и будет работать как задумано. Во-вторых, не перенаправляйте на тот же маршрут. Используйте определенный компонент для каждого маршрута, который предназначен для компонента. Обновите ваш массив маршрутов, как это.

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent }
];

РЕДАКТИРОВАТЬ

OP указал, что они хотят использовать отдельные модули маршрутизации для различных функциональных модулей, которые они имеют в своем приложении. Для этого у вас есть два варианта, которые я знаю. Вы можете либо использовать Lazy Loading, либо вы можете объявить маршруты, относящиеся к каждому функциональному модулю, в своем собственном модуле маршрутизации, а затем импортировать функциональный модуль в ваш app.module. Подход демонстрируется в следующем стеке стека: https://stackblitz.com/edit/angular-q8mkac

Answer 2

Используйте его следующим образом: убедитесь, что все компоненты созданы следующим образом

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

const appRoutes: Routes = [
    { path: '', component:AppComponent},
    { path: 'login', component:LoginComponent},
    { path: 'settings', component:SettingsComponent},
    { path: '**', component: PageNotFoundComponent }
];

Попробуйте импортировать RouterModule как RouterModule.forRoot(routes, { useHash: true })

Answer 3

Пожалуйста, используйте компонент вместо подстановочных знаков:

 { path: 'login', component: LoginComponent , pathMatch: 'full'}