2016-03-18 3 views
1

я сегментирован своим код в различные папки, такие какУгловой 2 Маршрутизация из другого филиала (к югу от маршрута)

/posts 
/events 
/users 

под каждую папку, есть компонент списка, компонент строки, и компонент подробно. в списке будет отображаться компонент строки, при нажатии на него будет загружен компонент детали. используя функцию сегментированного маршрутизатора Angular 2, все они работают в своей папке/дереве.

Однако компоненты строк сообщений и событий также будут загружать компонент строки пользователя, в надежде, что когда пользователь нажмет на него, он приведет к странице подробных сведений о пользователе. но я не могу справиться с этим в RouterConfig.

Кто-нибудь знает, как это должно быть выполнено? Thanx

в соответствии с просьбой, ниже является 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 { 
}; 

Так что все появляется хорошо, но, когда отображается PostDetailComponent, нажмите на UserCardComponent, я получаю сообщение об ошибке

Component "PostDetailComponent" has no route config. 

Итак, вопрос в том, как настроить маршрутизатор, чтобы я мог перейти непосредственно из/posts /: id в/users /: id

+0

Можете ли вы добавить код, который демонстрирует то, что вы на самом деле пытаетесь выполнить, и то, что вы пробовали, и где вы не смогли. Может быть, какое-то сообщение об ошибке? –

+2

Звучит очень похоже на то, что показано на https://angular.io/docs/ts/latest/tutorial/ –

+0

Я не думаю, что код совершенно необходим, потому что я просто потерян, нуждаясь в каком-то направлении. Но чтобы быть как можно более ясным, я буду редактировать и добавлять код. – Stone

ответ

0

Добавить / в качестве префикса к маршруту n ame, чтобы указать, что это абсолютный маршрут.

+0

, что не работает, и теперь ссылка нарушена и для UserListComponent (что было хорошо), и для PostDetailComponent, ошибка в компоненте «AppComponent» не имеет маршрута с именем «UserDetail». – Stone

+0

Я обновил свой ответ. –

+0

UserListComponent в порядке с '../UserDetail', но PostDetailComponent все еще сломан, как и раньше. – Stone

Смежные вопросы