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 原始例外：错误：路由的路由配置无效 '{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;零件： typeof pare ...'不能分配给'Route []'。输入'{路径：串; redirectTo：string; pathMatch：string; } | {path：string; component：typeof paren ...'不能分配给'Route'类型。

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

我的shell会在路由器的路径上加载，但是我去儿童路线的那一刻没什么用。帮助赞赏。

谢谢

Answer 1

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

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

此外，每当我们使用redirectTo时，pathMatch策略都应为full，因为我们需要精确路径匹配才能重定向。如果我们保持prefix（不指定然后默认为前缀），这将导致angular匹配到该条目的许多路由并导致各种错误。

请参阅此问题以获取更多detail

您应该删除任何导致路由器弃用的内容，因为错误指向路由声明和路由提供程序之间不匹配。您需要在bootstrap组件中使用以下代码来提供路由器。

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

另外看看很棒的article。这篇文章是关于alpha8版本的，但beta2没有重大变化，只有terminal:true被pathMatch:full取代

Answer 2

尝试使用redirectTo: '/parentComp'代替redirectTo: 'parentComp'。

Answer 3

组件类名称应该用上面的camel case编写，并以单词＆＃34; Component＆＃34;结尾。本教程在其第一部分中解释了这一点：https://angular.io/docs/ts/latest/tutorial/toh-pt3.html。

他们申请中的例子：

import { Component } from '@angular/core';

@Component({
  selector: 'hero-detail',
})
export class HeroDetailComponent {
}

然后将其添加到路由器：

  { path: 'detail/:id', component: HeroDetailComponent },

尝试更改组件类名称并重新编译

Answer 4

不确定你在这里做什么。

这对我有用：

{
    path: 'object', --> base path
    component: ObjectComponent, --> parent component, need to end with "Component"
    children: [
        {path: '', redirectTo: 'childa', pathMatch: 'full'}, --> subpath default, this would redirect "domain/object" to "domain/object/childa"
        {path: 'childa', component: AComponent}, --> this would load AComponent into router-outlet tag and set Your path to "domain/object/childa"
        {path: 'childb', component: BComponent}, --> this would load BComponent into router-outlet tag  and set Your path to "domain/object/childb"
    ]

基本上我相信您需要将您的根（路径：''）重定向设置为子节点。

这是ObjectComponent模板部分：

<button [routerLink]="['/object', 'childb']">Child B</button>
<router-outlet></router-outlet>

另外@Arpit Agarwal的答案会给你很多关于内部运作的细节......

Angular2子路由无法正常工作

4 个答案: