Question

我一直在尝试通过指定的路由器出口实现延迟加载，但是我没有运气。我创建了一个要通过延迟加载呈现的组件，并且模板在主应用程序组件中已经具有一个路由器出口（默认为一个）。

因此，为了路由我的组件，我知道我必须使用另一个路由器插座使用该名称来在特定位置渲染我的组件。谁能告诉我如何实现这一目标？

我创建了一个示例应用程序，在其中我使用了延迟加载，路由参数和命名路由器出口，这不适用于命名路由器出口。

请帮助我如何解决这个问题？谢谢！

以下是配置：

在LazyModule中

const routes: Routes =[ {path: 'load-me/:name', outlet:"parentOutlet", component: LazyParentComponent} ];

和app.routing.module.ts

const routes: Routes = [
  {path: 'lazy', loadChildren: './lazy.module#LazyModule'}
];

在app.component.html

中

<router-outlet name="parentOutlet"></router-outlet>

<button routerLink="/lazy/load-me/testname"> Load me</button>

在git上上传代码： https://github.com/kaushalndesai23/myrepo/tree/master/lazyDemo

编辑：

我使用下面的路由器链接更新了模板-

<button routerLink="['/', {outlets: {parentOutlet: ['/lazy/load-me','kaushal']}}]"> Load me</button>

我得到以下异常：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：'％5B'/'，％20％7Boutlets：％20％7BparentOutlet：％20％5B'/ lazy / load-me'，'kaushal'％5D％7D％7D％5D'

错误：无法匹配任何路由。 URL段：'％5B'/'，％20％7Boutlets：％20％7BparentOutlet：％20％5B'/ lazy / load-me'，'kaushal'％5D％7D％7D％5D'

at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2434)

at CatchSubscriber.selector (router.js:2415)

at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)

at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)

at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)

at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)

at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)

at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)

at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)

at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)

at resolvePromise (zone.js:831)

at resolvePromise (zone.js:788)

at zone.js:892

at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

使用命名路由器插座的延迟加载无法正常工作

0 个答案: