1

I have segmented my code into different folders such as 

/posts
/events
/users

under each folder, there's a list component, a row component, and a detail component. the list will display the row component, when clicked, will load the detail component. using the segmented router feature of Angular 2, they all work, within their own folder/tree.

however, the row components of posts and events, will also load the user row component as well, in hope that when the user click on it, it will lead to the user detail page. but i can't work that out in the RouterConfig.

anybody knows how this should be accomplished? thanx

as requested, bellow is a sniplet

app component
@RouteConfig([
    { path: './posts/...', name: 'Posts', component: PostsComponent },
    { path: './users/...', name: 'Users', component: UsersComponent }
])

post component    
@RouteConfig([
    { path: '/', name: 'PostList', component: PostListComponent },
    { path: '/:id', name: 'PostDetail', component: PostDetailComponent }
])

user component
@RouteConfig([
    { path: '/', name: 'UserList', component: UserListComponent },
    { path: '/:id', name: 'UserDetail', component: UserDetailComponent }
])

user list component
import {UserCardComponent} from './userCard.component';

@Component({
    selector: 'my-page',
    template: `
<card *ngFor="#user of userList" [user]="user"></card>
    `,
    directives: [
        userCardComponent
    ],
    providers: [
        UserService
    ]
})

user card component
@Component({
    selector: 'card',
    template: `
<section (click)="onNavigate($event)">{{user.name}}</section>
    `,
})

export class UserCardComponent {
    @Input user;

    constructor(
        private _router: Router,
        private _routeParams: RouteParams) {
    }

    onNavigate($event) {
        this._router.navigate(['UserDetail', {id: this.user.id.toString() }]);
    }
}

post detail component
import {UserCardComponent} from '../users/userCard.component';

@Component({
    selector: 'page',
    template: `
<card [user]="post.user"></card>
`,
    directives: [
        UserCardComponent
    ]

export class PostDetailComponent {
};

So everything shows up okay, but, when PostDetailComponent is displayed, click on the UserCardComponent, I get an error 

Component "PostDetailComponent" has no route config.

So, the question is, how do I configure the router so I can go directly from /posts/:id to /users/:id

Stone
  • 1,811
  • 2
  • 14
  • 14
  • Can you please add the code that demonstrates what you actually try to accomplish and what you have tried and where you failed. Maybe some error message? – Günter Zöchbauer Mar 18 '16 at 10:47
  • 2
    Sounds quite similar to what is demonstrated in https://angular.io/docs/ts/latest/tutorial/ – Günter Zöchbauer Mar 18 '16 at 10:48
  • I don't think the code is quite necessary, because I'm just lost, needing some direction. But to be as clear as possible, I will re-edit and add some code. – Stone Mar 18 '16 at 12:20
  • Please consult the "help" menu (http://stackoverflow.com/help) about how to ask good questions. Your abstract description of what you try to accomplish could be anything. – Günter Zöchbauer Mar 18 '16 at 12:21
  • You have a redundant `;` at the end of your `PostDetailComponent` class. – Günter Zöchbauer Mar 18 '16 at 12:43
  • Just to make it clear, the link is on the UserCardComponent, used by both UserListComponent and PostDetailComponent – Stone Mar 18 '16 at 12:50
  • Okay, solved it, by using this._router.parent.parent.navigate(['Users', 'UserDetail', {id: this.user.id.toString() }]); – Stone Mar 18 '16 at 13:28
  • Possible duplicate of [Angular 2 router navigate function not working](http://stackoverflow.com/questions/36014483/angular-2-router-navigate-function-not-working) – Günter Zöchbauer Mar 18 '16 at 14:11

1 Answers1

1

Add a / as prefix to the route name to indicate it's an absolute route

 this._router.navigate(['/User', {id: this.user.id.toString() }]);
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • that doesn't work, and now the link is broken on both UserListComponent (which was fine) and PostDetailComponent, the error is Component "AppComponent" has no route named "UserDetail". – Stone Mar 18 '16 at 12:48
  • UserListComponent is fine with '../UserDetail', but PostDetailComponent is still broken, same as before – Stone Mar 18 '16 at 12:58
  • If there is no way to make the same link (absolute or relative) work in all cases you need to make the link dynamic by using a different path depending on what the current route is. Is that what you want? – Günter Zöchbauer Mar 18 '16 at 13:00
  • I'm not sure, as I think this is a very common scenario, and should not be this difficult to implement. All I want is to go from /posts/123 to /users/345, and the end link is always the same (/users/345). – Stone Mar 18 '16 at 13:18