[英]Angular Routes not rendering child components, instead render parent component
I want to create a nested route movies/:id
However with my current configuration, when user navigates to movies/1
the parent component is always rendered. 我想创建一个嵌套的路线movies/:id
但是使用我当前的配置,当用户导航到movies/1
,始终会渲染父组件。 I need MovieDetailComponent
to render on movies/1
url. 我需要MovieDetailComponent
才能在movies/1
URL上呈现。 Here is my configuration: 这是我的配置:
const routes: Routes = [{
path: '',
component: HomeView
},
{
path: 'movies',
component: MoviesView,
children: [{
path: ':id',
component: MovieDetailComponent
}]
},
{
path: 'not-found',
component: PageNotFoundComponent,
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'not-found'
}
];
I have tried adding pathMatch: 'full'
to the parent component first and then child component, and then both. 我试过pathMatch: 'full'
添加到父组件,然后再添加子组件,然后再添加两者。 When I add pathMach: 'full'
to the parent component, the child URL doesn't even get hit, when I add the pathMatch: 'full'
just to the child component, only the parent component ever gets rendered even if the URL is /movies/:id
Why is this happening? 当我将pathMach: 'full'
添加到父组件时,子URL甚至都不会被命中,当我将pathMatch: 'full'
仅添加到子组件时,即使URL是/movies/:id
为什么会发生这种情况?
When I moved the child path into its own route, not being nested, the component rendered correctly. 当我将子路径移动到其自己的路径中时(未嵌套),该组件将正确呈现。
const routes: Routes = [{
path: '',
component: HomeView
},
{
path: 'movies',
component: MoviesView
},
{
path: 'movies:id',
component: MovieDetailComponent
} {
path: 'not-found',
component: PageNotFoundComponent,
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'not-found'
}
];
If you have route that has a component and also a children field Angular will use that component's router outlet to place the children component DOM. 如果您的路由包含一个组件和一个子字段,则Angular将使用该组件的路由器出口放置子组件DOM。 So in your case you should have a router outlet in your MoviesView component: 因此,在您的情况下, MoviesView组件中应具有路由器插座:
<router-outlet></router-outlet>
If you want to have a different view when you go to movies
and movies/:id
you need to go with the second method. 如果要在看movies
和movies/:id
时有不同的视图,则需要使用第二种方法。 If you need now or in the future to have more than one extra route under the movies route I prefer to write it as 如果您现在或将来需要在电影路线下有一条以上的额外路线,我更愿意将其写为
const routes: Routes = [
{ path: '', component: HomeView },
{ path: 'movies',
children: [
{ path: '', component: MoviesView }
{ path: ':id', component: MovieDetailComponent }
]},
{ path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
{ path: '**', redirectTo: 'not-found'}
];
Also if you don't need the movies
route (without the id) you can do: 另外,如果您不需要movies
路线(没有ID),也可以执行以下操作:
const routes: Routes = [
{ path: '', component: HomeView },
{ path: 'movies',
children: [
{ path: ':id', component: MovieDetailComponent }
]},
{ path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
{ path: '**', redirectTo: 'not-found'}
];
Check your <router-outlet>
directives, you have to have one inside the MoviesView component. 检查您的<router-outlet>
指令, MoviesView组件内部必须有一个。 Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.