Question

我目前拥有看起来像这样的应用程序组件：

<app-navigation></app-navigation>
<router-outlet></router-outlet>

和路线：

const appRoutes: Routes = [
  { path: 'items', component: ListComponent },
  { path: 'items/:id', component: DetailsComponent },
  { path: 'items/:id/page1', component: Page1Component },
  { path: 'items/:id/page2', component: Page2Component },
  { path: 'anotherpage', component AnotherPageComponent} },
];

id参数是我使用http服务加载的资源的ID，它对所有子页面均有效。这意味着，我不需要每次用户从Page1导航到Page2时都加载它。

现在的问题是，在哪里加载资源？

当前正在执行DetailsComponent：

export class DetailsComponent {

  isLoading = true;

  constructor(
    private backend: BackendService,
    protected state: StateService,
    private route: ActivatedRoute) {

    this.route.params.pipe(
      map(params => params['id']),
      filter(id => this.state.currentItem != id),
      distinct(),
      tap(() => {
        this.isLoading = true;
        this.state.currentCase = null
      }),
      switchMap(id => backend.getItemById(id)),
      tap(() => this.isLoading = false)
    ).subscribe(response => {
      this.state.currentCase = response;
    });
  }
}

我想最好不要在每个页面（Page1，Page2）等中执行此操作。

我想考虑在router-outlet的“ ItemContainerCompoent”中可以有另一个router-outlet，但是当用户在内部router-outlet的页面之间导航时，我该如何突出显示链接？ / p>

Answer 1

您需要的是子条路线：

const appRoutes: Routes = [
  { path: 'items', component: ListComponent },
  { path: 'items/:id', component: DetailsComponent 
    children: [
       { path: 'page1', component: Page1Component },
       { path: 'page2', component: Page2Component },
       { path: 'anotherpage', component AnotherPageComponent} }
    ]
  }
];

这部分文档对您很有用：Milestone 4: Crisis center feature

从哪里从/ page /：id / subpage等路由加载资源

1 个答案: