我正在尝试为路由器插座命名,但它不起作用。
这是完美运行的基本路由:
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '',
redirectTo: 'dashboard1',
pathMatch: 'full'
},
{
path: 'dashboard1',
component: AdminDashboard1Component
},
{
path: 'dashboard2',
component: AdminDashboard2Component
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule { }
Run Code Online (Sandbox Code Playgroud)
<div class="wrapper">
<app-admin-header></app-admin-header>
<!-- Left side column. contains the logo and sidebar -->
<app-admin-left-side></app-admin-left-side>
<!-- Content Wrapper. Contains page content -->
<router-outlet></router-outlet>
<!-- /.content-wrapper -->
<app-admin-footer></app-admin-footer>
<!-- Control Sidebar --> …Run Code Online (Sandbox Code Playgroud) 我有一个延迟加载问题,而不是路由到指定的路由器插座.有人可以看看我错在哪里吗?我有一个主页,其中有一个链接到产品 - >默认路由器插座和产品详细信息 - >命名路由器插座.
<div>
<div><a [routerLink]="['product']"> Product </a> </div>
<div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div>
<div> <router-outlet></router-outlet></div>
<div> <router-outlet name="detail"></router-outlet>
</div>
Run Code Online (Sandbox Code Playgroud)
以下是plunker代码.
我正在尝试使用 angular 9 开发 SPA,我几乎尝试延迟加载每个组件及其所有子组件。当我尝试在延迟加载的组件之一中使用路由器插座时出现了我的问题,并且我希望使用此路由器插座来加载子组件(这也是延迟加载的)。当我这样做时,我总是在 app.component.html 的主路由器出口中加载所有嵌套的延迟加载组件,而不是嵌套延迟加载组件中的路由器出口
app.component 模板:
<app-navbar></app-navbar>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)
app-routing.module:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'articles', loadChildren: () => import('./articles-viewer/articles-viewer.module').then(m => m.ArticlesViewerModule) },
{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
{ path: '**', redirectTo: ''}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Run Code Online (Sandbox Code Playgroud)
应用模块:
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
NavbarComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule, …Run Code Online (Sandbox Code Playgroud)