Angular2: генератор маршрутов для '' не был включен в переданные параметры

У меня проблемы с маршрутами Angular2. У меня несколько уровней вложенности. Вот моя настройка: у меня есть верхний уровень маршрутов для неаутентифицированных пользователей. После входа в систему они находятся под /my маршрутами. На этом уровне у них есть информационная панель, которая может перенести их на уровень /my/projects/. Маршруты под projects требуют идентификатора. Подробная информация о настройке приведена ниже. Вот верхний уровень AppComponent:

 @RouteConfig([
  {path: '/home', name:'Home', component: HomeComponent, useAsDefault: true},
  {path: '/login', name: 'Login', component: LoginComponent},
  {path: '/signup', name: 'SignUp', component:SignUpComponent},
  {path: '/my/...', name: 'MyApp', component: MyAppComponent}
])
export class AppComponent {
  constructor(private router: Router) {

  }

После аутентификации пользователи переходят в MyAppComponent, который настроен следующим образом:

 @RouteConfig([
  {path:'/dashboard', name: 'MyDashboard', component: DashboardComponent, useAsDefault: true},
  {path: '/projects/...', name: 'MyProjects', component: ProjectRootComponent},
])

export class MyAppComponent {

  constructor(private router: Router) {
  }
}

DashboardComponent:

export class DashboardComponent {
  public projects: Array<Project>;
  public loaded: boolean;
  public loadError: boolean;

  constructor(private _service: ProjectService, private router:Router) {
    this.projects = [];
    this.loaded = false;
  }

  ngOnInit() {
    console.log('Dashboard component initialized');
    this._service.getUserProjects()
    .then(projects => {
      this.loaded = true;
      this.projects = projects;
    },
    error => {
      this.loaded = true;
      this.loadError = error;
    });
  }

  selectProject(project: Project) {
    // this.router.navigateByUrl('/my/projects/' + project.id); // Tried this approach as well with the same error
    this.router.parent.navigate(['MyApp', 'MyProjects', {id: project.id}]);
  }

Попав в DashboardComponent, я загружаю список проектов. Когда я нажимаю на проект, вызывается метод selectProject(project), который должен перейти на страницу этого проекта. Проект id передается как параметр. Маршрут MyProjects ожидает идентификатор и настроен следующим образом:

    @RouteConfig ([
  {path: '/:id', name: 'ProjectHome', component: ProjectHomeComponent, useAsDefault: true},
  {path: '/:id/details', name: 'ProjectDetails', component: ProjectDetailsComponent },
])

export class ProjectRootComponent implements OnInit {

  id: string;
  constructor(private router: Router, private routeParams: RouteParams, private projectService: ProjectService) {
  }

  ngOnInit() {
    this.id = this.routeParams.get('id');

    console.log('Project Component Initialized with id: ' + this.id);
  }

  createProject() {

  }
}

Когда вызывается selectProject(project) на панели управления, я получаю сообщение об ошибке: ORIGINAL EXCEPTION: Route generator for 'id' was not included in parameters passed.

Я также попытался перейти непосредственно к деталям проекта, используя оба:

this.router.parent.navigate(['MyApp', 'MyProjects', {id: project.id}, 'ProjectDetails']

а также

 this.router.parent.navigate(['MyApp', 'MyProjects', 'ProjectDetails', {id: project.id}]

Оба генерируют ту же ошибку, что и выше.

Примечание. Это похоже на этот вопрос спросил ранее, но мои маршруты уже настроены, как это предлагается в ответе на этот вопрос.


person Inn0vative1    schedule 28.02.2016    source источник


Ответы (1)


Я думаю, у вас проблема с поиском маршрута, поскольку вы перемещаетесь по дочерним маршрутам. Из RouterLink docs (должно быть таким же для linkParams):

К имени первого маршрута следует добавлять символы /, ./ или ../. Если маршрут начинается с /, маршрутизатор будет искать маршрут из корня приложения. Если маршрут начинается с ./, маршрутизатор вместо этого будет искать маршрут в дочерних элементах текущего компонента. И если маршрут начинается с ../, маршрутизатор будет смотреть на родителя текущего компонента.

Я считаю, что это должно сработать:

this.router.navigate(['/MyApp', 'MyProjects', 'ProjectDetails', {id: project.id}]

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

this.router.navigate(['./MyProjects', 'ProjectDetails', {id: project.id}]
person Sasxa    schedule 28.02.2016
comment
Спасибо, что включили текст ссылки, так как ссылка теперь 404s - person CountMurphy; 14.02.2017