Angular 2 路由 - 无法匹配 URL 段中的任何路由

Question

我已经为此浪费了超过 7 天的时间，但无法让它发挥作用。当我将模板路径放在 children 中时，我收到错误，应用程序崩溃。

这是我的代码:

export const routes: Routes = [
{path: 'store', component: StoreComponent, 
    children: [
          {path: 'apple', component: AppleComponent}
    ]
}

AppleComponent.ts

import {Component, OnInit, Type} from '@angular/core';
import {Router, ActivatedRoute} from "@angular/router";

@Component ({
    selector: 'apple',
    templareUrl: '../apple.html
})

export class AppleComponent implements OnInit {
     constructor(){}

     nGOnInit():void{}
}

我已经把<base href="/">在 index.html 文件中，但这没有帮助。

我刚刚开始学习 Angular2，所以如果我问了一个愚蠢的问题，请原谅我。

编辑:这需要放在 children 中因为router-outlet .

谢谢你们。

Answer 1

你可以简单地使用这个

{ path: 'store/apple', component: AppleComponent, pathMatch: 'full' }

或者你可以使用这种方式，

export const storeChildrenRoutes: Routes = [
  {
    path: 'store',
    component: StoreComponent,
    children: [
      {
        path: 'apple',
        component: AppleComponent,
      }
    ]
  }
];
@NgModule({
  imports: [
    RouterModule.forChild(storeChildrenRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class StoreChildRoutingModule {}

将其作为单独的模块并将其导入 AppRouting 模块。你的 AppRouting 模块将包含你的主要路线，其中有

RouterModule.forRoot(appRootRoutes)