Перемещаться относительно Angular 2 Router (версия 3)

Как перемещаться относительно от /info/123/step1 до /info/123/step2 внутри компонента с помощью Router без конкатенации строк и указания /info/123/?

Я добавил собственный ответ ниже. Пожалуйста, не стесняйтесь предлагать лучший ответ.;-) Я думаю, что есть лучшие подходы.

Ответ 1

После нескольких исследований я столкнулся с

this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute});

this.router.navigate(['../step2'], {relativeTo: this.activatedRoute});

Первый подход (Router.createUrlTree API) не работал у меня, т.е. ничего не происходило. Второй подход (Router.navigate API) работает.

Однако второй подход использует NavigationExtras (второй аргумент), который документирован с помощью @experimental. Надеюсь, что в следующем выпуске не будет больших изменений... и NavigationExtras будет стабильным.

Любые другие предложения/подходы, пожалуйста, не стесняйтесь отвечать на мой вопрос выше.

Обновление 2016-10-12

Существует еще один вопрос о стеке:

Как перейти к следующему маршруту

Обновление 2016-10-24

Документация:

Маршрутизация и Навигация (относительная навигация)

Ответ 2

Вы можете использовать ниже,

Предполагается, что questions загружается в ваш основной router-outlet

  this.router.navigate([
      '/',
      { 
        outlets: {
          primary: [
              // below may be replaced with different variables
              'questions',
              '123',  
              'step2'
          ]
        }
      }
  ])

Надеюсь, это поможет!

Ответ 3

Сначала вставьте маршрутизатор и ActivatedRoute в конструктор

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

затем используйте для Click Event:

onEditClick(){
        this.router.navigate(['edit'],{relativeTo:this.route});

Вы переходите к ожидаемой странице. В моем сценарии я хотел пойти рецепт /1, чтобы отредактировать рецепт. http://localhost:4200/recipes/1/edit