У меня проблемы с маршрутами 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}]
Оба генерируют ту же ошибку, что и выше.
Примечание. Это похоже на этот вопрос спросил ранее, но мои маршруты уже настроены, как это предлагается в ответе на этот вопрос.