我在我的Angular 项目中使用辅助出口。
在我的routing.module.ts
中,我有:
Routing.module.ts
const routes: Routes = [
{
path: '',
component: XXXComponet,
},
{
path: 'home',
component: YYYComponet,
},
{
path: 'file-viewer',
outlet: 'secondary',
loadChildren: () => import('../../other/app/other.app.module').then((m) => m.OtherAppModule),
},
{path: '**', canActivate: [AuthGuard], component: PageNotFoundComponent},
字符串
我已经声明,对于路由(secondary:file-viewer)
,我希望我的other.module
被加载。在我的app.html
中,我还有这个:
App.html:
<div id="main-content-container">
<router-outlet></router-outlet>
</div>
<router-outlet name="secondary"></router-outlet>
型
在我的other.module
文件中,我声明了以下路由:
Other.Module:
{
path: 'image-viewer',
component: ImageViewerComponent,
},
{
path: '',
component: AppComponent,
children: [
{
path: 'search',
component: AAAComponent,
children: [
{
path: 'result',
component: BBBViewComponent,
data: {needConnections: true},
},
{
path: '',
component: CCCViewComponent,
data: {needConnections: true},
},
],
},
{
path: 'explorer',
component: FFFViewComponent,
data: {needConnections: true},
},
{
path: 'reporter',
component: GGGViewComponent,
},
{
path: 'datasets',
component:KKKViewerComponent,
}]
}
型
现在,让我告诉你这是怎么回事:我试图创建一个文件查看器库。它将从我的项目的几个点被调用。所以我决定在我的项目中使用辅助路由。所以每当我想打开我的文件查看器时,我只需要:
await this.router.navigate(['', {outlets: {secondary: 'other-file-viewer/image-viewer'}}]);
型
它会为我打开它。
我还传递了skipLocationChange: true
给它,这样用户就不会注意到url的变化。还有一些queryParams。
await this.router.navigate(['', {outlets: {secondary: 'other-file-viewer/image-viewer'}}], {
skipLocationChange: true,
queryParams: {
id: params.fileId,
src: this.getDownloadStreamLink(params.fileId),
},
});
型
所以基本上当用户点击一个按钮时,url会从\xx\explorer
变成xx\explorer(secondary:file-viewer/image-viewer)
。
它正在工作。当我点击按钮时,我的组件会打开。问题是它也刷新了我在页面上已经拥有的内容。它基本上也刷新了我的主要出口。
我如何才能避免这种情况?
任何建议都很感激。
1条答案
按热度按时间ou6hu8tu1#
不是棱角的问题。我把自己弄得一团糟。