[英]Multiple named router-outlet - component imported but not initialized and rendered
I'm using multiple named angular 8 router-outlet
in a web app. 我在网络应用程序中使用多个名为angular 8
router-outlet
。 All the routerLink
seems to work as it changes the URL but components in my 2nd router-outlet
are imported but not initialized nor rendered. 所有
routerLink
似乎都工作,因为它更改了URL,但我的第二个router-outlet
中的组件已导入但未初始化或呈现。
I made a Stackblitz available here : https://stackblitz.com/edit/ng-multiple-router-outlet?file=src/app/app.component.ts 我在这里提供了Stackblitz: https ://stackblitz.com/edit/ng-multiple-router-outlet?file = src / app / app.component.ts
As you can see, when you click on the sidebar, under photos you have a second navigation level by clicking on Google or Facebook but nothing is rendered. 正如您所看到的,当您单击侧边栏时,在照片下您可以通过单击Google或Facebook获得第二个导航级别,但不会呈现任何内容。
In modules, components used in other modules and RouterModule are well exported to be accessible, I don't see what I've done wrong. 在模块中,其他模块和RouterModule中使用的组件都可以很好地导出,我看不出我做错了什么。
I tried to declare the routes with both forRoot
and forChild
methods, I put some logs, but I'm running out of clues. 我尝试用
forRoot
和forChild
方法声明路由,我放了一些日志,但是我的线索已经用完了。
Thanks for your help ! 谢谢你的帮助 !
Angular router is pretty simple once you understand how nested routes works there. 一旦了解了嵌套路由如何在那里工作,Angular路由器就非常简单了。
Let's imagine a simple configuration: 让我们设想一个简单的配置:
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
children: [
{ path: 'child', component: ChildComponent }
]
}
])
How would you use router-outlet
to cover all routes above? 你如何使用
router-outlet
覆盖上面的所有路线?
app.component.html
\
contains
\
<router-outlet></router-outlet>
\/
renders
\
HomeComponent
home.component.html
\
contains
\
<router-outlet></router-outlet>
renders
\
ChildComponent
The main takeaway here is that router-outlet
renders component depending on router context. 这里的主要内容是
router-outlet
根据路由器上下文呈现组件。 Once it renders component a new context is created and all router-outlet
's declared at this level will look at children
configuration. 一旦它渲染组件,就会创建一个新的上下文,并且在此级别声明的所有
router-outlet
将查看children
配置。
The same is true for named routes. 命名路线也是如此。
You've generated the link like: 您已生成以下链接:
(selection:facebook//sidebar:photos)
It means that these named routes should be at the same root level. 这意味着这些命名路由应该在同一根级别。 But you defined
<router-outlet name="selection"></router-outlet>
at nested level inside rendered by router LibraryComponent
. 但是您在路由器
LibraryComponent
呈现的嵌套级别内定义了<router-outlet name="selection"></router-outlet>
。
Let's add this outlet at the same level as 'sidebar': 让我们将此插座添加到与“侧边栏”相同的级别:
<router-outlet name="sidebar"></router-outlet>
<router-outlet name="selection"></router-outlet>
and it actually works stackblitz 它实际上是stackblitz
Now let's come back to your attempt. 现在让我们回到你的尝试。 If you want to render selection components inside
selection.component.html
then you should be using nested named routed links: 如果要在
selection.component.html
呈现选择组件,那么您应该使用嵌套的命名路由链接:
selection.component.html selection.component.html
[routerLink]="['.', { outlets: { selection: [routeName] } }]"
\/
relative path
The above binding will generate nested links like (sidebar:photos/(selection:facebook))
以上绑定将生成嵌套链接,如
(sidebar:photos/(selection:facebook))
Now you need to move SelectionRoutes
configuration to children
property of photos
path: 现在您需要将
SelectionRoutes
配置移动到photos
路径的children
属性:
selection.module.ts selection.module.ts
imports: [
CommonModule,
RouterModule, //.forChild(SelectionRoutes)
],
sidebar.routes.ts sidebar.routes.ts
import { SelectionRoutes } from '../selection/selection.routes';
...
export const SidebarRoutes: Route[] = [
{ path: 'photos', component: LibraryComponent, outlet: 'sidebar', children: SelectionRoutes },
Stackblitz Example Stackblitz示例
In order to make facebook
as a default subroute you create a route with redirectTo
option like: 为了使
facebook
成为默认子路由,您可以使用redirectTo
选项创建路由,如:
export const SelectionRoutes: Route[] = [
{ path: 'facebook', component: FacebookComponent, outlet: 'selection' },
{ path: 'google', component: GoogleComponent, outlet: 'selection' },
{ path: '', redirectTo: '/(sidebar:photos/(selection:facebook))', pathMatch: 'full', },
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.