Проблема маршрутизации во вложенном дочернем элементе
У меня есть два компонента в одном компоненте. При нажатии кнопки я вызываю функцию openClientCallLogs, но маршрутизация не работает, URL-адрес будет создан, но они не перешли к другому компоненту.
по нажатию кнопки
openClientCallLogs(client: Client): void {
this.router.navigate(['/index/client/clients-detail', client.id ,'call-logs']);
}
Маршрутизация модуля
export const clientsRoutes: Routes = [
{
path: 'client',
children: [
{
path: 'clients-detail',
component: ClientDetailsComponent,
children: [
{
path: ':id/call-logs',
component: ClientCallLogsComponent
}
]
}
],
},
];
Это следует за моим модулем App.routing
const routes: Routes = [
{
path: '',
component: FullComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full',
},
{
path: 'dashboard',
loadChildren: () =>
import('./pages/pages.module').then((m) => m.PagesModule),
},
{
path: 'index',
loadChildren: () =>
import('./pages/clients/clients.module').then((m) => m.ClientsModule),
},
Компонент проекта имеет множество зависимостей
просто нужны маршруты с пустыми компонентами, где и возникает проблема
есть ли в вашем ClientDetailsComponent розетка для роутера?
@SamScholefield нет, если я добавлю розетку маршрутизатора подробно, они не перейдут на другую страницу, они отобразят эту страницу на существующей
Ответы 2
Я думаю, проблема у вас в том, что вы не хотите иметь ClientDetailsComponent в качестве родителя, а хотите использовать только ClientCallLogsComponent. Для этого вы можете изменить маршруты клиентов следующим образом.
export const clientsRoutes: Routes = [
{
path: 'client',
children: [
{
path: 'clients-detail',
children: [
{
path:'',
component: ClientDetailsComponent,
},
{
path: ':id/call-logs',
component: ClientCallLogsComponent
}
]
}
],
},
];
я добавляю, но ничего не происходит
Когда вы просматриваете свою страницу, какой компонент сейчас находится в DOM или в DOM сейчас нет компонента?
Компонент ClientDetailsComponent
Итак, если вы перейдете на новую страницу и увидите правильный путь, но в DOM все еще есть старый компонент ClientDetailsComponent, обычно это всего лишь одна из этих двух проблем. 1. У вашего компонента ClientCallLogsComponent есть некоторые проблемы. Вы можете проверить журналы консоли, а также попытаться очистить компонент и протестировать его еще раз. 2. В вашем маршруте над ClientDetailsComponent все еще есть ClientCallLogsComponent. Пожалуйста, проверьте еще раз, чтобы убедиться, что ClientDetailsComponent встречается в вашем файле маршрутизации только один раз.
Вам нужно создать компонент, который будет контейнером для рендеринга ClientDetailsComponent или ClientCallLogsComponent, это решит вашу проблему.
Допустим, компонент называется ClientDetailComponent.
@Component({
selector: 'app-client',
imports: [RouterOutlet],
standalone: true,
template: `<router-outlet/>
`,
})
export class ClientDetailComponent {
}
Затем добавьте этот компонент-оболочку в маршрутизацию следующим образом.
export const clientsRoutes: Routes = [
{
path: 'client',
children: [
{
path: 'clients-detail',
component: ClientDetailComponent,
children: [
{
path:'',
component: ClientDetailsComponent,
},
{
path: ':id/call-logs',
component: ClientCallLogsComponent
}
]
}
],
},
];
разве это невозможно, если они дети клиентов-подробнее
@gouravkumar обновил то же самое!
даа сейчас работаю
пожалуйста, поделитесь стекблицем с минимальным кодом и воспроизведенной проблемой