为什么我不能继续子组件的路由？

Question

我有以下项目结构：GalleryModuleModule有一个父组件GalleryComponent其中有两个子组件：GalleryAddComponent和GalleryItemComponent。当我想从组件GalleryComponent切换到组件GalleryAddComponent地址栏中的地址会更改，但父组件不会消失，也不会发生向子组件的转换。帮助了解问题是什么以及如何解决此问题。

图库路由模块：

const galleryRoutes: Routes = [
{
path: 'gallery',
component: GalleryComponent,
children: [
{path: 'gallery-add', component: GalleryAddComponent},
{path: 'galleryItem/:id', component: GalleryItemComponent},
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(galleryRoutes)
],
exports: [RouterModule],
})

图库组件的模板：

<a routerLink="gallery-add" class="btn btn-outline-success tog">
Add New Post
</a>
<a [routerLink]="['./galleryItem', pic.id]">
<img [src]="pic.url" alt="test" class="img-responsive">
<p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p>
</a>

Answer 1

您需要使用不同的组件来保存<router-outlet></router-outlet>。如果路径''，您可以在此处显示GalleryComponent。从你GalleryComponent你可以有一个链接到其他两个组件：GalleryItemComponent, GalleryAddComponent。这样，当您单击库组件中的链接时，它将被另一个组件替换。

在堆栈闪电战 https://angular-hbb4qt.stackblitz.io 上创建了一个示例