英文:
Display content underneath tab rather than going to new page
问题
在我的应用程序的一个页面中，我有一个选项卡，设置如下：
<igx-tab-item>
<igx-tab-header [routerLink]="['projectsor', libraryId]">
<span igxTabHeaderLabel>查看项目SOR</span>
</igx-tab-header>
</igx-tab-item>
目前，该选项卡会带您转到一个新页面，但我想要的是在该选项卡下方显示数据，但我不确定如何实现。我知道使用router-outlet可能是最好的选择，但我不确定哪里出错了。
我已经更改为以下方式：
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>查看项目SOR</span>
</igx-tab-header>
<igx-tab-content>
<router-outlet></router-outlet>
</igx-tab-content>
</igx-tab-item>
在我的路由文件中，我有以下内容：
const routes: Routes = [
{ path: 'detail', component: ProjectDetailComponent},
{ path: 'detail/:id', component: ProjectDetailComponent},
{ path: 'detail/:id/projectsor/:libraryId', component: LibraryDetailComponent,
children: [
{path: '', component: LibrarySetupComponent},
{path: 'disciplines', component: DisciplineListComponent},
{path: 'jointdisciplines', component: JointDisciplineListComponent},
{path: 'materials', component: MaterialListComponent},
{path: 'weights', component: WeightItemListComponent},
{path: 'schedules/:disciplineId', component: ScheduleListComponent},
{path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
{path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent},
]},
{ path: '', component: ProjectListComponent }
];
我想要显示的内容来自：
path: 'detail/:id/projectsor/:libraryId', component: LibraryDetailComponent,
你如何让router-outlet知道我希望它显示什么呢？
Hope this helps!
英文:
In one of the pages of my application I've got tabs with one setup like so:
<igx-tab-item>
<igx-tab-header [routerLink]="['projectsor', libraryId]">
<span igxTabHeaderLabel>View Project SOR</span>
</igx-tab-header>
</igx-tab-item>
At the moment that tab will take take you to a new page, what I am trying to change however is to just have the data displayed underneath that tab but I am not sure how I can go about this. I am aware that using router-outlet would be my best bet but I'm not sure where I'm going wrong with this.
I have changed it to like so:
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>View Project SOR</span>
</igx-tab-header>
<igx-tab-content>
<router-outlet></router-outlet>
</igx-tab-content>
</igx-tab-item>
and in my routing file I have the following:
const routes: Routes = [
{ path: 'detail', component: ProjectDetailComponent},
{ path: 'detail/:id', component: ProjectDetailComponent},
{ path: 'detail/:id/projectsor/:libraryId', component: LibraryDetailComponent,
children: [
{path: '', component: LibrarySetupComponent},
{path: 'disciplines', component: DisciplineListComponent},
{path: 'jointdisciplines', component: JointDisciplineListComponent},
{path: 'materials', component: MaterialListComponent},
{path: 'weights', component: WeightItemListComponent},
{path: 'schedules/:disciplineId', component: ScheduleListComponent},
{path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
{path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent},
]},
{ path: '', component: ProjectListComponent }
];
The content I am wanting to show is from:
path: 'detail/:id/projectsor/:libraryId', component: LibraryDetailComponent,
how can I let the router-outlet know what I am wanting it to show?
答案1
得分: 0
这是您要翻译的部分：
Found out how to fix my error, was more sorting the paths rather than creating a secondary outlet. In my routing file I just had to update it like so:
在修复错误时发现，更多是对路径进行排序，而不是创建次要出口。在我的路由文件中，我只需要像这样更新它：
const routes: Routes = [
{ path: 'detail', component: ProjectDetailComponent},
{ path: 'detail/:id', component: ProjectDetailComponent,
children: [
{ path: 'projectsor/:libraryId', component: LibraryDetailComponent,
children: [
{path: '', component: LibrarySetupComponent},
{path: 'disciplines', component: DisciplineListComponent},
{path: 'jointdisciplines', component: JointDisciplineListComponent},
{path: 'materials', component: MaterialListComponent},
{path: 'weights', component: WeightItemListComponent},
{path: 'schedules/:disciplineId', component: ScheduleListComponent},
{path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
{path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent}
]}
]},
{ path: '', component: ProjectListComponent }
];
and then in the html do:
然后在HTML中执行：
<igx-tab-item routerLinkActive #rlaSOR="routerLinkActive" [selected]="rlaSOR.isActive">
<igx-tab-header [routerLink]="['projectsor', libraryId]">
View Project SOR
英文:
Found out how to fix my error, was more sorting the paths rather than creating a secondary outlet. In my routing file I just had to update it like so:
const routes: Routes = [
{ path: 'detail', component: ProjectDetailComponent},
{ path: 'detail/:id', component: ProjectDetailComponent,
children: [
{ path: 'projectsor/:libraryId', component: LibraryDetailComponent,
children: [
{path: '', component: LibrarySetupComponent},
{path: 'disciplines', component: DisciplineListComponent},
{path: 'jointdisciplines', component: JointDisciplineListComponent},
{path: 'materials', component: MaterialListComponent},
{path: 'weights', component: WeightItemListComponent},
{path: 'schedules/:disciplineId', component: ScheduleListComponent},
{path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
{path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent}
]}
]},
{ path: '', component: ProjectListComponent }
];
and then in the html do:
<igx-tab-item routerLinkActive #rlaSOR="routerLinkActive" [selected]="rlaSOR.isActive">
<igx-tab-header [routerLink]="['projectsor', libraryId]">
<span igxTabHeaderLabel>View Project SOR</span>
</igx-tab-header>
<igx-tab-content>
<router-outlet></router-outlet>
</igx-tab-content>
</igx-tab-item>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论