Angular 角度布线不渲染子组件，而是渲染父组件

我想创建一个嵌套路由

movies/：id

，但是在当前配置下，当用户导航到

movies/1

时，父组件始终呈现。我需要

MovieDetailComponent

在

movies/1

url上渲染。以下是我的配置：

const routes:routes=[{
路径：“”，
组件：HomeView
},
{
路径：'电影'，
组成部分：MoviesView，
儿童：[{
路径：'：id'，
组件：MovieDetailComponent
}]
},
{
路径：“未找到”，
组件：PageNotFoundComponent，
路径匹配：“已满”
},
{
路径：'**'，
重定向到：“未找到”
}
];

我已尝试先将

pathMatch:'full'

添加到父组件，然后再添加到子组件，然后两者都添加。当我将

pathMach:'full'

添加到父组件时，子URL甚至不会被命中，当我将

pathMatch:'full'

仅添加到子组件时，即使URL是

/movies/：id

为什么会发生这种情况

当我将子路径移动到它自己的路径中（没有嵌套）时，组件渲染正确

const routes:routes=[{
路径：“”，
组件：HomeView
},
{
路径：'电影'，
组件：MoviesView
},
{
路径：'movies:id'，
组件：MovieDetailComponent
} {
路径：“未找到”，
组件：PageNotFoundComponent，
路径匹配：“已满”
},
{
路径：'**'，
重定向到：“未找到”
}
];

检查您的

指令，您必须在MoviesView组件中有一个指令。

---

希望对您有所帮助。

如果您的路由包含一个组件和一个子字段，则将使用该组件的路由器出口来放置子组件DOM。因此，在您的情况下，MoviesView组件中应该有一个路由器插座：

如果在转到

movies

和

movies/：id

时希望有不同的视图，则需要使用第二种方法。如果您现在或将来需要在电影路线下有多条额外路线，我更愿意将其写为

const routes:routes=[
{路径：''，组件：HomeView}，
{路径：'电影'，
儿童：[
{路径：''，组件：MoviesView}
{路径：':id'，组件：MovieDetailComponent}
]},
{路径：'未找到'，组件：PageNotFoundComponent，路径匹配：'完整'}，
{路径：'**'，重定向到：'未找到'}
];

此外，如果您不需要

电影

路线（无id），您可以执行以下操作：

const routes:routes=[
{路径：''，组件：HomeView}，
{路径：'电影'，
儿童：[
{路径：':id'，组件：MovieDetailComponent}
]},
{路径：'未找到'，组件：PageNotFoundComponent，路径匹配：'完整'}，
{路径：'**'，重定向到：'未找到'}
];

在MoviesView中添加

起作用了，但是现在在点击movies时两个组件都被渲染了/：id，我如何才能使它只显示MoviesDetail组件，而不是同时显示MoviesView和MoviesDetail？@O.MeeKoh-Hm，您可以这样做：const routes:routes=[。。。，{path:'movies'，component:moviesconner，children:[{path:'：id'，component:MovieDetailComponent}，{path:''，component:MoviesView}，]}…]；我明白了，所以为了一次显示一个组件，我必须将其作为另一个路由，而不是子路由。智利路由将始终显示在父级内部，对吗？是的，您是正确的。但是如果您没有为“父级”指定组件（因此您删除了

组件：MoviesView

）然后，它使用它在链中找到的第一个路由器出口（可能您只有一个路由器出口，因此它将是根组件中的一个）@O.MeeKoh我编辑了答案，为我之前的评论提供了一个示例。这很完美，正是我所需要的。谢谢！我很高兴能够提供帮助。