Question

我不明白为什么我的物品等级路线没有被点击。因此，我在以下位置查询了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)"

我觉得我缺少一些简单的东西，例如我需要在某个地方注入另一个指令，但是迷失在关卡中。任何帮助表示赞赏。

Answer 1

答案本质上是多个问题：

当您使用'（location）#Module'延迟加载路由时，需要确保正确设置了其他下游组件。 EG：path：“ / Money”，这导致实现RouterModule.ForChildren（）的新模块必须使这些路由采用父级的路径。所以''变成'Money'。
在Angular中，执行routelink =“（route）”与[routeLink] =“ ['/（route）']”不同。我正在做后者，这引起了问题。
当您有一个延迟加载的路由时，可能会再次加载“ BrowserModule”时遇到问题。您需要在树的下方将延迟加载的模块中的“ CommonModule”加载。
我使用的是Angular Material，因此必须重新下载这些模块才能重新加载模块。

现在可以正常工作了。

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

1 个答案: