angularjs 辅助出口使整个页面在Angular中刷新

kmb7vmvb  于 2024-01-05  发布在  Angular
关注(0)|答案(1)|浏览(210)

我在我的Angular 项目中使用辅助出口。
在我的routing.module.ts中,我有:
Routing.module.ts

  1. const routes: Routes = [
  2. {
  3. path: '',
  4. component: XXXComponet,
  5. },
  6. {
  7. path: 'home',
  8. component: YYYComponet,
  9. },
  10. {
  11. path: 'file-viewer',
  12. outlet: 'secondary',
  13. loadChildren: () => import('../../other/app/other.app.module').then((m) => m.OtherAppModule),
  14. },
  15. {path: '**', canActivate: [AuthGuard], component: PageNotFoundComponent},

字符串
我已经声明,对于路由(secondary:file-viewer),我希望我的other.module被加载。在我的app.html中,我还有这个:
App.html:

  1. <div id="main-content-container">
  2. <router-outlet></router-outlet>
  3. </div>
  4. <router-outlet name="secondary"></router-outlet>


在我的other.module文件中,我声明了以下路由:
Other.Module:

  1. {
  2. path: 'image-viewer',
  3. component: ImageViewerComponent,
  4. },
  5. {
  6. path: '',
  7. component: AppComponent,
  8. children: [
  9. {
  10. path: 'search',
  11. component: AAAComponent,
  12. children: [
  13. {
  14. path: 'result',
  15. component: BBBViewComponent,
  16. data: {needConnections: true},
  17. },
  18. {
  19. path: '',
  20. component: CCCViewComponent,
  21. data: {needConnections: true},
  22. },
  23. ],
  24. },
  25. {
  26. path: 'explorer',
  27. component: FFFViewComponent,
  28. data: {needConnections: true},
  29. },
  30. {
  31. path: 'reporter',
  32. component: GGGViewComponent,
  33. },
  34. {
  35. path: 'datasets',
  36. component:KKKViewerComponent,
  37. }]
  38. }


现在,让我告诉你这是怎么回事:我试图创建一个文件查看器库。它将从我的项目的几个点被调用。所以我决定在我的项目中使用辅助路由。所以每当我想打开我的文件查看器时,我只需要:

  1. await this.router.navigate(['', {outlets: {secondary: 'other-file-viewer/image-viewer'}}]);


它会为我打开它。
我还传递了skipLocationChange: true给它,这样用户就不会注意到url的变化。还有一些queryParams。

  1. await this.router.navigate(['', {outlets: {secondary: 'other-file-viewer/image-viewer'}}], {
  2. skipLocationChange: true,
  3. queryParams: {
  4. id: params.fileId,
  5. src: this.getDownloadStreamLink(params.fileId),
  6. },
  7. });


所以基本上当用户点击一个按钮时,url会从\xx\explorer变成xx\explorer(secondary:file-viewer/image-viewer)
它正在工作。当我点击按钮时,我的组件会打开。问题是它也刷新了我在页面上已经拥有的内容。它基本上也刷新了我的主要出口。
我如何才能避免这种情况?
任何建议都很感激。

ou6hu8tu

ou6hu8tu1#

不是棱角的问题。我把自己弄得一团糟。

相关问题