Angular2子路由不起作用

Question

我正在使用@angular rc4 "@angular/router": "^3.0.0-beta.2"

我无法让子路由工作,当我开始添加子路由时,我会遇到很多种错误:这是我的路由代码:

{ path: '', redirectTo: 'parentComp'},
{ path: 'parentComp', component: parentContainer, 
        children: [
            {path: 'componenta', component: ComponentA }
        ]
    }

EXCEPTION:在实例化路由器时出错!.BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(匿名函数)@ application_ref.js:337schedulerFn @async.js:139SafeSubscriber .__ tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone .js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL EXCEPTION:错误:路由的路由配置无效' {path:"",redirectTo:"activity"}':请提供'pathMatch'.'pathMatch'的默认值是'prefix',但通常意图使用'full'.BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74(匿名函数)@ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber .__ tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @async .js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL STACKTRACE:BrowserDomAdapter. logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77(匿名函数)@ application_ref.js:337schedulerFn @async.js:139SafeSubscriber .__ tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423

所以我添加了pathMatch:

{ path: '', redirectTo: 'parentComp', pathMatch: 'full'},
{ path: 'parentComp', component: ActivityContainer, 
    children: [
        {path: 'componenta', component: ComponentA }
    ]
}

这是我得到的错误:

app/bootstrapper.routes.ts(5,7):错误TS2322:输入'({path:string; redirectTo:string; pathMatch:string;} | {path:string; component:typeof pare ...'不可分配输入'Route []'.输入'{path:string; redirectTo:string; pathMatch:string;} | {path:string; component:typeof paren ...'不能分配给'Route'类型.

我意识到写的许多答案都是关于确保使用正确的版本,但是我正在使用正确的最新路由,就像在angular.io中一样.所以我也有路由器弃用它以减少数量出现的错误,但仍然,我无法让子路线工作.

我有我的shell将在路由器的路径中加载,但是我去儿童路线的那一刻没什么用.帮助赞赏.

谢谢

Answer 1

Angular路由器将具有子节点的路由视为非终端路由,并且路由仅发生在终端路由上.Angular路由器期望路由具有路径的默认条目:''.在你的情况下,你应该在子数组中添加以下代码

children: [
        {path: '', redirectTo: componenta, pathMatch: 'full'}
    ]

此外,每当我们使用redirectTopathMatch策略时,我们都应该full按照我们想要的精确路径匹配来重定向.如果我们保持prefix(不指定然后默认为前缀),这将导致angular匹配到该条目的许多路由并导致各种错误.

有关详细信息,请参阅此问题

你应该摆脱任何路由器的导入 - 弃用,因为错误指向路由声明和路由提供者之间的不匹配.您需要在bootstrap组件中使用以下代码来提供路由器.

provideRouter(routes)// routes is array of routes defined in your code.  

还看看好文章.这篇文章是关于alpha8版本的,但beta2没有重大改变,除了terminal:true被替换为pathMatch:full