Question

我已将代码细分为不同的文件夹，例如

/posts
/events
/users

在每个文件夹下，有一个列表组件，一个行组件和一个详细信息组件。列表将显示行组件，单击时将加载详细信息组件。使用Angular 2的分段路由器功能，它们都可以在自己的文件夹/树中工作。

但是，帖子和事件的行组件也会加载用户行组件，希望当用户点击它时，它会导致用户详细信息页面。但我无法在RouterConfig中解决这个问题。

是谁知道应该如何实现？感谢名单

根据要求，下面是一个小节

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 {
};

所以一切都显示正常，但是，当显示PostDetailComponent时，单击UserCardComponent，我收到错误

Component "PostDetailComponent" has no route config.

所以，问题是，如何配置路由器，以便我可以直接从/ posts /：id转到/ users /：id

Answer 1

在路由名称中添加/作为前缀，以表明它是绝对路由

 this._router.navigate(['/User', {id: this.user.id.toString() }]);

来自另一个分支的Angular 2路由（子路由）

1 个答案: