在Angular 4中,如何使用子路径定位辅助插座?

时间:2017-08-13 15:51:56

标签: angular

https://plnkr.co/edit/TXo6Ua

以上链接的Plunker展示了我遇到的问题。我想有一个辅助路由器,可用于显示模式窗口,如登录或注销模式。我正在使用子路由来允许在功能模块中定义路由(在plunker中只有一个模块)。以下是我定义的路线:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'detail', component: DetailComponent, outlet: 'modal' },
  { 
    path: 'heros', 
    children: [
      { path: 'display', component: HeroDisplayComponent },
      { path: 'create', component: HeroCreateComponent, outlet: 'modal' }
    ]
  },
  { path: 'heroCreate', component: HeroCreateComponent, outlet: 'modal' },
  { path: '**', component: PageNotFoundComponent } 
]

以下是我尝试用来显示应用程序各个部分的链接:

<ul>
  <li><a [routerLink]="['/']">Home</a> - Display a welcome message in the unnamed router-outlet</li>
  <li><a [routerLink]="['heros/display']">Hero Display</a> - Display a Hero Display Page in the unnamed router-outlet</li>
  <li><a [routerLink]="[{outlets: {'modal': 'heroCreate'}}]">Hero Create Normal</a> - Display a Hero Create Page in the "modal" router-outlet Through a non-child route</li>
  <li><a [routerLink]="[{outlets: {'modal': 'heros/create'}}]">Hero Create Child</a> - Should display a "Hero Create" section in the "modal" router-outlet</li>
  <li><a [routerLink]="[{outlets: {'modal': 'detail' }}]">Detail</a> - Should display a "Detail" secion in the "modal" router-outlet</li>
</ul>

上面的所有链接都按预期工作,除了&#34; Hero Create Child&#34;链接。这个得到以下错误:

errors.ts:42 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'heros/create'
Error: Cannot match any routes. URL Segment: 'heros/create'
at ApplyRedirects.noMatchError (apply_redirects.ts:117)
at CatchSubscriber.eval [as selector] (apply_redirects.ts:102)
at CatchSubscriber.error (catch.ts:105)
at MapSubscriber.Subscriber._error (Subscriber.ts:139)
at MapSubscriber.Subscriber.error (Subscriber.ts:109)
at MapSubscriber.Subscriber._error (Subscriber.ts:139)
at MapSubscriber.Subscriber.error (Subscriber.ts:109)
at MapSubscriber.Subscriber._error (Subscriber.ts:139)
at MapSubscriber.Subscriber.error (Subscriber.ts:109)
at LastSubscriber.Subscriber._error (Subscriber.ts:139)
at ApplyRedirects.noMatchError (apply_redirects.ts:117)
at CatchSubscriber.eval [as selector] (apply_redirects.ts:102)
at CatchSubscriber.error (catch.ts:105)
at MapSubscriber.Subscriber._error (Subscriber.ts:139)
at MapSubscriber.Subscriber.error (Subscriber.ts:109)
at MapSubscriber.Subscriber._error (Subscriber.ts:139)
at MapSubscriber.Subscriber.error (Subscriber.ts:109)
at MapSubscriber.Subscriber._error (Subscriber.ts:139)
at MapSubscriber.Subscriber.error (Subscriber.ts:109)
at LastSubscriber.Subscriber._error (Subscriber.ts:139)
at resolvePromise (zone.js:783)
at resolvePromise (zone.js:754)
at zone.js:831
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (ng_zone.ts:288)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.invokeTask [as invoke] (zone.js:502)
at invokeTask (zone.js:1370)
at ____________________Elapsed_1_ms__At__Sun_Aug_13_2017_11_49_00_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at resolvePromise (zone.js:778)
at ____________________Elapsed_0_ms__At__Sun_Aug_13_2017_11_49_00_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at resolvePromise (zone.js:778)
at ____________________Elapsed_0_ms__At__Sun_Aug_13_2017_11_49_00_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at resolvePromise (zone.js:778)
at ____________________Elapsed_2_ms__At__Sun_Aug_13_2017_11_49_00_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at ZoneAwarePromise.then (zone.js:918)
at ____________________Elapsed_3_ms__At__Sun_Aug_13_2017_11_49_00_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at ZoneAwarePromise.then (zone.js:918)
at ____________________Elapsed_5048_ms__At__Sun_Aug_13_2017_11_48_55_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleEventTask (zone.js:261)
at HTMLAnchorElement.addEventListener (zone.js:1640)
at DomEventsPlugin.addEventListener (dom_events.ts:37)
at ____________________Elapsed_12_ms__At__Sun_Aug_13_2017_11_48_55_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at resolvePromise (zone.js:778)
at ____________________Elapsed_0_ms__At__Sun_Aug_13_2017_11_48_55_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at resolvePromise (zone.js:778)
at ____________________Elapsed_0_ms__At__Sun_Aug_13_2017_11_48_55_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at resolvePromise (zone.js:778)
at ____________________Elapsed_0_ms__At__Sun_Aug_13_2017_11_48_55_GMT_0400__EDT_ (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate.scheduleTask (zone.js:404)
at Object.onScheduleTask (zone.js:300)
at ZoneDelegate.scheduleTask (zone.js:404)
at Zone.scheduleTask (zone.js:235)
at Zone.scheduleMicroTask (zone.js:255)
at scheduleResolveOrReject (zone.js:829)
at ZoneAwarePromise.then (zone.js:918)

我整个周末一直在反对这个问题,任何帮助都会非常感激。

0 个答案:

没有答案