时间戳

首页 > 解决方案 > 不明白为什么我的路由在 Angular6 中不起作用

angular6 - 不明白为什么我的路由在 Angular6 中不起作用

问题描述

我不明白为什么我的物品等级路线没有受到打击。所以我在这里查找了有关路由的 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)"

我觉得我错过了一些简单的东西，比如我需要在某处注入另一个指令，但在关卡中迷失了方向。任何帮助表示赞赏。

标签： angular6angular-routingrouteparams

解决方案

答案基本上是多个问题：

  1. 当您使用“（位置）#Module”延迟加载路由时，您需要确保正确设置进一步的下游组件。EG: path: "/Money" 导致新模块实现 RouterModule.ForChildren() 必须让这些路由假定父路径。所以''变成了'钱'。
  2. 在 Angular 中，似乎执行 routelink="(route)" 与 [routeLink]="['/(route)']" 不同。我正在做后者，这引起了问题。
  3. 当你有一个延迟加载的路由时，你可能会在再次加载“BrowserModule”时遇到问题。您需要在树的更下方的延迟加载模块中加载“CommonModule”。
  4. 我使用的是 Angular Material，因此必须下载这些材料才能再次加载模块。

现在它工作正常。

推荐阅读