1

我尝试使用 Angular2 和新组件路由器实现的要求如下：一个页面分为 2 个部分。例如：（左，右）每个部分将包含一个组件。每个组件都有自己的路由和状态。有没有办法使用 url 来维护状态？这样我就可以共享链接并根据 url 将组件初始化为它们的状态。

我使用辅助路由器插座来表示每个部分。如何使用 url 表示两个辅助路由？还是我误解了辅助路线的使用？

该示例可以在https://github.com/rmchndrng/ng2learnrouter找到

我的路由配置

export const routes: RouterConfig = [
      {
        path: '',redirectTo: '/home', terminal: true
      },
      { path: 'home', component: HomeComponent },
      {
        path: 'heroes', component: HeroesComponent, outlet: 'left',
        children: [      
          { path: 'list', component: HeroesListComponent },
          { path: 'view/:id', component: HeroViewComponent },
        ]
      },
      {
        path: 'villains', component: VillainsComponent, outlet: 'right',
        children: [
          { path: 'list', component: VillainsListComponent },
          { path: 'view/:id', component: VillainViewComponent },
        ]
      }
    ];

示例应用程序在 http://ramachandrang.com/ng2learnrouter/#/home运行

以下作品

http://ramachandrang.com/ng2learnrouter/#/home(left:heroes/list) http://ramachandrang.com/ng2learnrouter/#/home(right:villains/list)

当我在寻找类似以下的东西时，它将能够代表路由器出口状态。

例如。

http://ramachandrang.com/ng2learnrouter/#/home(left:heroes/list,right:villains/list) http://ramachandrang.com/ng2learnrouter/#/home(left:heroes/list)(right:villains /列表）等

我的项目依赖项。

  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12"
  }
4

1 回答 1

1

通过将它们添加为段，我能够在 url 上表示多个辅助路由器出口路由。

例如。 http://ramachandrang.com/ng2learnrouter/#/home(left:heroes/list//right:villains/list)

但是我仍然无法在一个插座内导航，保持另一个插座的状态。

由于新路由器仍处于 alpha 阶段，正在等待发布候选版本。

于 2016-06-29T03:58:01.253 回答