вернуться с помощью routerLink

Я использую routerLink, чтобы вернуться на свою страницу.

Текущий маршрут может иметь 3 уровня:

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

Кроме того, у меня есть несколько разных компонентов, поэтому он не всегда будет родительским, это может быть parent1 или parent2, а также для дочернего и внука, например:

myurl.com/parent2/child1/grandchild2

я хочу всегда переходить на предыдущий уровень, например:

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

что я сделал:

<button [routerLink]="['../'']">
       back
</button>

но он всегда переходит на "myurl.com"

как я могу это решить?

Как предложили некоторые пользователи, я делюсь своей конфигурацией маршрутизации:

в app.routing.ts:

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

в parent.routing.ts:

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

если бы в браузере я написал:

myurl.com/parent -> it works

но нажать кнопку назад не получается


angular angular-routerlink angular5
person cucuru    schedule 11.07.2018    source источник
comment
stackoverflow.com/questions/37196882/ Возможно, это поможет вам   -  person Silvester Schn.    schedule 11.07.2018
comment
спасибо, я это уже читал, но мне не помогло :(   -  person cucuru    schedule 11.07.2018
comment
Можете ли вы поделиться своей конфигурацией маршрутизации.   -  person eduPeeth    schedule 11.07.2018

Ответы (3)


arrow_upward
21
arrow_downward

Если вы пытаетесь перейти на один уровень вверх, вы почти правы.

<a routerLink="..">Up</a>

Это будет перемещаться

myurl.com/parent/child/grandchild -> myurl.com/parent/child

Однако, если вы хотите по-настоящему перемещаться «назад», как кнопка «Назад» в браузере, вам нужно использовать javascript.

Существует множество существующих ответов на эту проблему на этот вопрос StackOverflow

Для чего-то более сложного это будет зависеть от того, что именно вы пытаетесь сделать, но, скорее всего, потребуется обработчик кликов и некоторые ручные манипуляции с URL-адресом.

person Vlad274    schedule 11.07.2018
comment
Спасибо, мне нужно подняться, я пробовал это, но результат тот же, он переходит на главную страницу, а не на родительскую. - person cucuru; 11.07.2018
comment
@cucuru В этом случае я подозреваю, что вы возвращаетесь к маршруту приложения по умолчанию, как если бы у вас был неверный URL-адрес. Не видя конкретных URL-адресов, которые вы используете, трудно сказать, но я бы порекомендовал вам попытаться перейти (в новой вкладке или окне) непосредственно к указанному маршруту. - person Vlad274; 11.07.2018
comment
спасибо, это был мой первый выбор, попробуйте удалить вручную из URL /child, и это сработает - person cucuru; 12.07.2018
comment
Вам не нужно делать это вручную, похоже, проблема в вашем маршрутизаторе, иначе ваш <button [routerLink]="['../'']"> back</button> должен работать. - person eduPeeth; 12.07.2018
comment
Я имею в виду в браузере, чтобы проверить правильность файла маршрутизатора. Я делюсь своей конфигурацией маршрутизации в исходном сообщении - person cucuru; 12.07.2018

arrow_upward
1
arrow_downward

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

Angular 11: он отлично работает из коробки.

@NgModule({
  imports: [RouterModule.forRoot(routes, {})], // relativeLinkResolution === 'corrected' by default
  exports: [RouterModule],
})
export class AppRoutingModule {}

До Angular 11: явно используйте {relativeLinkResolution: 'corrected'}.

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

Вы также можете установить {relativeLinkResolution:'legacy'}, чтобы получить текущее поведение, с которым вы сталкиваетесь.

person Wajahath    schedule 25.11.2020

arrow_upward
1
arrow_downward

Попробуйте этот [routerLink]="['../child']"

person Aidos Omurzakov    schedule 03.02.2021