从子组件路由到父级的路由器出口答案

【问题标题】：Routing to parent's router-outlet from a child component从子组件路由到父级的路由器出口
【发布时间】：2016-07-06 02:51:35
【问题描述】：

我设置了一个plnkr 来演示我想问什么

我在一个网络应用中有一些组件，

父组件App

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div class="main-container">
      <h2>This is the base. This div must be seen on app pages</h2>
      <a [routerLink]="['Home']"> Home </a> | 
      <a [routerLink]="['Users']"> Users  </a> | 
      <a [routerLink]="['Contact']"> Contact </a>
    </div>

    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {
    path: '/',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true

  },
  {
    path: '/users/...',
    name: 'Users',
    component: UsersComponent
  },
  {
    path: '/contact',
    name: 'Contact',
    component: ContactComponent
  }
])
export class App {

}

UsersComponent 被加载到父控制器的router-outlet 路由/users，如下所示，

@Component({
  selector: 'my-app',
  template : `

    <div  *ngFor="#page of pages">
      <a [routerLink]="[page.name]">
        {{page.slug}}
      </a>
    </div>

    <router-outlet></router-outlet>
  `
})
@RouteConfig([
  {path : '/', name: 'Main', component: MainRoute, useAsDefault: true}  
])
export class UsersComponent{
  /**
  * some methods to configure the routes,
  */
}

UsersComponent为用户动态配置路由，

例如。 /alex、/john 等，

由于路由来自子组件，因此路径看起来像 example.com/users/alex、example.com/users/john 等。但我希望路径是 example.com/alex 和 example.com/john

我还想将与每个用户关联的组件加载到父级的router-outlet。在这里的例子中，到App的router-outlet，这样我就可以摆脱用户列表了。

感谢您的帮助。

【问题讨论】：

您在关注文档时是否遇到任何错误？ angular.io/docs/ts/latest/guide/router.html
看看this分叉的plunker。它工作一次。但是，如果您单击用户>用户，然后再次单击用户，则会引发异常。近了吗？

标签： typescript angular angular2-routing

【解决方案1】：

这是我对您的配置的看法：Plunker

1.像这样定义App 的RouteConfig

@RouteConfig([
  {
    path: '/',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true

  },
  {
    path: '/:user',
    name: 'User',
    component: PersonComponent
  },
  {
    path: '/users',
    name: 'Users',
    component: UsersComponent
  },
  {
    path: '/contact',
    name: 'Contact',
    component: ContactComponent
  }
])

2。从您的UsersComponent 中删除router.config 和<router-outlet>

不要通过RouteData 发送用户数据，因为您必须提前为每个用户定义路由，这没有必要/高效。

@Component({
  selector: 'my-app',
  template : `

    <div  *ngFor="#page of pages">
      <a [routerLink]="['User', {user: page.name}]">
        {{page.slug}}
      </a>
    </div>
  `,
  providers : [PagesService]
})
export class UsersComponent{
  pages = [];

  constructor(private pgSvc: PagesService, router: Router) {
  }
}

3.构建您的服务以向特定用户发送数据

4.更新您的 PersonComponent 以适应这些变化。

@Component({
  selector : 'person',
  template : `
  <div class="person-container">
    <h3>Person selected : <strong> {{data.get['user']}} </strong></h3>
  </div>
  `
})
class PersonComponent {
  constructor(public data: RouteParams) {

   // call your service here to get the user specific data by using 
    let userName = data.get('user');

   // yourService.getUserData(userName);
  }
  routerCanReuse(next, prev) {
    return false;
  }
}

【讨论】：