将视图路由器-oulet更改为侧边栏

Question

嗨，我想知道为什么我不能访问子路由。

我有一个侧边栏，但在侧边栏中，我想显示一个列表，如果我想添加一个项目或编辑将视图更改为侧边栏列表到表单，表单到列表

这是我的应用程序组件

<app-sidebar3></app-sidebar3>
app module 

<div id="root-content" (window:resize)="onResize($event)"
class="e-main-content" style="font-size: 16px;  transform: translateX(0px); margin-left: 0px; margin-right: 0px; margin-bottom: 0px;">
<app-nav-menu></app-nav-menu>
<router-outlet></router-outlet>
</div>
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ApiAuthorizationModule,
ReactiveFormsModule,
AppRoutingModule,
//Registering EJ2 grid module syncfusion
SidebarModule,
ToolbarModule,
ListViewModule,
DropDownButtonModule,
CircularGaugeModule,
],
declarations: [
AppComponent,
NavMenuComponent,
SideBar3Component,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(router: Router) { }
}

我的应用路由

const appRoutes: Routes = [
{ path: '', component: HomeComponent, },
];

@NgModule({
declarations: [
HomeComponent,
],
imports:
[RouterModule.forRoot(appRoutes,
{
enableTracing: false // <-- debugging purposes only
//preloadingStrategy: SelectivePreloadingStrategyService,
}
)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }

这是我的侧边栏

<ejs-sidebar id="sidebar3" #sidebar3 [target]='target' [position]='position' [height]="innerHeight" [width]='width' [type]='type' [closeOnDocumentClick]='closeOnDocumentClick' [enableGestures]="false" (created)="created($event)">
<div>
<button ejs-button id="close-btn-sidebar3" class="e-btn close-btn float-left" (click)="sideBar3Hide()">
<span id="innerclose" class="e-icons close-icon"></span>
</button>
</div>
<div class="title3-sidebar3">SITIOS</div>

<nav>
<a routerLink="./sitioslist" routerLinkActive="active">SitiosList</a>
<a routerLink="./sitiosform" routerLinkActive="active">SitiosForm</a>

</nav>
<router-outlet name="sidebar3outlet" #sidebar3outlet></router-outlet>
</ejs-sidebar>

这是我的侧边栏3模块

@NgModule({
imports: [
CommonModule,
FormsModule,
SideBar3RoutingModule,
],
declarations: [
SideBar3Component,
SitiosListComponent,
SitiosFormComponent,
]
})
export class SideBar3Module { }

我的侧边栏路由

const sidebar3Routes: Routes = [
{
path: '',
component: SitiosListComponent,
outlet: 'sidebar3outlet',
children: [
{
path: 'sitiosform',
component: SitiosFormComponent,
}
]
}
];

@NgModule({
imports: [
RouterModule.forChild(sidebar3Routes),
],
exports: [
RouterModule
]
})
export class SideBar3RoutingModule { }

截图

Answer 1

要使用路由器进行导航，您需要在 app-routing.module .ts 文件中声明路由。我们根据您的要求准备了类似的样品。

在此示例中，我们在主页中呈现了侧边栏。请参阅下面的屏幕截图。

在此处输入图像描述

单击转到侧边栏3页面时，它会导航到侧边栏3组件并打开右侧边栏。

const routes: Routes = [ { 
path: '', 
component: Sidebar1Component, 

}, 
{ 
// When you click the sidebar3 and then it naviagte to sidebar3 component. 
path: 'sidebar3', 
component: Sidebar3Component, 
// List and form component is the child component of sidebar3 component. 
children: [ 
{ 
// When you click go to list, it navigate to list component page. 
path: 'list', 
component: ListComponent 
}, { 
// When you click go to form, it navigate to form component page. 
path: 'form', 
component: FormComponent 
} 
] 
}]; 

当您单击右侧边栏中的"转到表单"页面时，它会导航到表单组件页面。请参阅以下代码片段。

<div class="value"> 
<!-- navigate to form page when click the form tag --> 
<a [routerLink]="['/sidebar3', 'form']">Go to Form</a> 
</div> 
<div class="value"> 
<!-- navigate to list page iehen click the list value --> 
<a [routerLink]="['/sidebar3', 'list']">Go to List</a> 
</div> 

请参阅下面的示例链接。 https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app-2018000553.zip

如果您需要任何进一步的帮助，请告诉我们。

问候，
Sowmiya.P