Блог

Главная - Вопросы по программированию - В Angular, как перейти к относительному пути с помощью `href`?

В Angular, как перейти к относительному пути с помощью `href`?

#angular #angular-router

#angular #angular-маршрутизатор

Вопрос:

Я использую Ionic с Angular (т.Е. И @angular/router ), но я считаю, что этот вопрос также имеет отношение к Angular без Ionic.

Как я могу перейти к относительной папке с помощью href ?

У меня есть такая структура:

 (root)
..A
....B1
....B2

Когда я перехожу к /A/B1 — B1 компонент визуализируется. В нем у меня есть этот HTML:

 <ios-button href="../B2">Click Me</ios-button>

Я ожидаю, что нажатие кнопки приведет к переходу /A/B2 , но вместо этого он переходит к /B2 .

Я тоже пытался href="./../B2" , но это дает тот же результат.

Если я использую полный путь ( href="/A/B2" ), то это работает.

Как мне достичь ожидаемого результата с помощью частичного (т.Е. Относительного) пути?

Ответ №1:

У вас есть возможность реализовать это следующим образом, обрабатывая перенаправление внутри вашего компонента

Дополнительная информация о документации Angular, определяющей относительный маршрут

 @Component({...})
export class TestComponent {

   constructor(
      private router: Router
      private route: ActivatedRoute
   ) {}

   navigateTo(path: string): void {
       this.router.navigate([path], { relativeTo: this.route });        
   }
}

С учетом этого, { relativeTo: this.route } и если у вас есть путь ../B2 , вы сообщаете Angular, что от этого текущего маршрута перейдите на 1 шаг назад и перейдите к B2

Макет родительского маршрута: http://localhost:4200/parent

Пример #1

 // This will be http://localhost:4200/parent/B2
this.router.navigate(['B2'], { relativeTo: this.route });

Пример #2

 // This will be http://localhost:4200/B2
// As this goes up one level
this.router.navigate(['../B2'], { relativeTo: this.route });

ПРИМЕЧАНИЕ:

  • При перенаправлении маршрута лучше использовать [routerLink]="" вместо href внутри вашего шаблона
    • Доступ к уровням вверх <a [routerLink]="[../B2]">B2</a>
    • Если только один уровень, <a [routerLink]="'B2'">B2</a> с одинарной кавычкой внутри
  • Или, если вы будете обрабатывать перенаправление в своем компоненте, вы будете использовать Router from @angular/router

Создали демонстрационную версию Stackblitz для вашей справки

Комментарии:

1. Спасибо! Я спрашиваю конкретно о том, как это сделать на стороне HTML. Я попробовал routerLink , как вы предлагали, но это не сработало. Когда я это сделал <a [routerLink]="../B2"> — страница не загрузилась (я получил «Неожиданный токен». Ошибка JS). Я попробовал <a [routerLink]="'../B2'"> , что не вызвало ошибки, но также не сработало (ничего не произошло, когда я нажал на кнопку). Я получил тот же результат с [routerLink]="['../B2']" помощью: (

2. О, я понимаю, приведенный выше ответ зависит от того, объявили ли вы пути маршрутизатора в своей угловой маршрутизации следующим образом: angular.io/tutorial/toh-pt5 — Могу ли я узнать, объявили ли вы пути в этом подходе?

3. Я .. полагаю, что так .. У меня есть app-routing.module файл (который был сгенерирован с ionic start помощью). Хотя /B1 и /B2 «вложенные маршруты» управляются «вложенным файлом маршрутизации» A модуля (т. Е. Они находятся внутри a-routing.module.ts ). Теперь я начинаю подозревать, что у меня что-то не так с моей общей структурой / маршрутизацией, потому что я также столкнулся с другой проблемой, связанной с (ngSubmit) тем, что событие не запускается в компоненте B1 , но работает в компоненте A . Так что это заставляет меня думать, что у меня какая-то ошибка более низкого уровня (которую я не ожидаю решить в рамках этого вопроса здесь …)

4. @obe обновили приведенный выше ответ, особенно в разделе Примечаний, и создали демонстрационную версию Stackblitz для вашей справки для примера вложенного маршрута с родительским и дочерним доступом к прямому маршруту или с помощью уровня, подобного ../ B2 . Надеюсь, это поможет 🙂

5. У меня все еще не работает. Ваша демо-версия работает (спасибо !!), Так что я почти уверен, что проблема кроется в другом месте моего кода. Я продолжу устранять неполадки, но в любом случае я приму ваш ответ здесь 🙂 спасибо!