无法匹配任何路线Angular 6上的错误

Question

我开始学习如何使用Angular 6制作Web应用程序，此刻我正在尝试制作类似于Discord的东西，只是看我是否真的可以做到。

目前，我有以下路线：

const routes: Routes = [{
  path: '',
  component: MeComponent,
},{
  path: 'guild',
  component: MeComponent,
}, {
  path: 'guild/:guild_id',
  component: GuildComponent,
}, {
  path: 'guild/:guild_id/channel/:channel_id',
  component: ChannelComponent
}];

但是，我似乎无法访问ChannelComponent，因为每次我尝试访问Channel时，它只会将我重定向到此错误的首页：

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'guild/5ba393943b445b2e942f31e4/channels/123'
Error: Cannot match any routes. URL Segment: 'guild/5ba393943b445b2e942f31e4/channels/123'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
    at CatchSubscriber.selector (router.js:1363)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
    at CatchSubscriber.selector (router.js:1363)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

我不确定如何解决此问题，即使我尝试在每个对象中使用children标记也是如此

'' -> Me
'guilds' -> Me (since no guild id was provided)
  - ':guild_id' -> GuildComp (shows the guild info)
        - 'channels' -> GuildComp (no channel id was provided)
        - 'channels/:channel_id' -> ChannelComp (shows the channel info)

但这也不起作用。

有什么建议么？

我对Angular和Web开发仍然还是比较陌生的，所以请不要讨厌。

Answer 1

如我所见，您正在输入错误

guild / 5ba393943b445b2e942f31e4 / channels / 123此网址在您的浏览器中

但是你已经定义了

路线中的guild /：guild_id / channel /：channel_id

因此，只需从网址中的频道中删除“ s”即可