我不明白为什么我的物品级别路由没有被击中。 所以我在这里查找了路由的 Angular 站点：https://angular.io/guide/router。 我有一个这样的主路由设置：
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'Login', component: LoginComponent },
{ path: '', redirectTo: '/Login', pathMatch: 'full' },
{
path: 'Money',
//Could this be wrong path and nothing is telling me?
loadChildren: '../Modules/Money/money.module#MoneyModule',
//canLoad: [LoginGuard]
},
{ path: '**', component: PageNotFoundComponent },
]
//, { enableTracing: true }
)
],
exports: [ RouterModule ],
providers: [LoginGuard, AuthService]
})
我有一个这样的"模块"来计算我的钱。 我试图设置"以从父路由继承直接路由，但它从未起作用，因此也可能是问题的一部分。
RouterModule.forChild(
[
// { path: '', component: MoneyListingsComponent, canActivate: [LoginGuard] },
{ path: 'Money', component: MoneyListingsComponent },
{ path: 'Money:id', component: MoneyEntryComponent }
])
然后我在 html 中有一个实现，如下所示：
<div id="moneyEntryArea">
<router-outlet></router-outlet>
<div *ngFor="let tran of transactions">
<div>ID:
<a [routerLink]="['/Money', tran.transactionID]">{{tran.transactionID}}</a>
Amount: {{tran.amount}}
Desc:{{tran.transactionDesc}}
Running Total:{{tran.runningTotal}}
</div>
</div>
</div>
所以基本上我的列表很好，但是当我单击"交易"的id时，它会被以下错误吞噬：
"Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
at Array.map (<anonymous>)
at webpackAsyncContext (http://localhost:4200/main.js:2710:34)
at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/vendor.js:59394:82)
at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (http://localhost:4200/vendor.js:59386:60)
at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (http://localhost:4200/vendor.js:122028:82)
at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (http://localhost:4200/vendor.js:122016:35)
at MergeMapSubscriber.project (http://localhost:4200/vendor.js:120288:47)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:4200/vendor.js:132985:27)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:4200/vendor.js:132975:18)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.js:127446:18)"
我觉得我错过了一些简单的东西，比如我需要在某处注入另一个指令，但在关卡中迷失了方向。 任何帮助，不胜感激。
答案基本上是多个问题：
- 当您使用"(位置(#Module"延迟加载路线时，您需要确保正确设置其他下游组件。 EG：路径："/Money"，它指向实现RouterModule.ForChildren((的新模块，必须让这些路由承担父级的路径。 所以"变成了"钱"。
- 在 Angular 中，执行 routelink="(route(" 似乎与 [routeLink]="['/(route(']" 不同。 我正在做后者，它引起了问题。
- 当您有一个延迟加载的路由时，您可能会在再次加载"浏览器模块"时遇到问题。 您需要在树的下游延迟加载模块中加载"CommonModule"。
- 我使用的是 Angular 材质，因此必须下载这些材质才能再次加载模块。
现在它工作正常。