为什么我不能继续使用子组件的路线？

Question

我有以下项目结构：GalleryModuleModule有一个父组件GalleryComponent，其中有两个子组件：GalleryAddComponent和GalleryItemComponent。当我想从组件GalleryComponent切换到组件GalleryAddComponent时，地址栏中的地址会发生变化，但父组件不会消失，并且不会发生到子组件的转换。帮助了解问题所在以及如何解决此问题。

GalleryRoutingModule：

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],
})

GalleryComponent的模板：

                <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。这样，当您单击图库组件中的链接时，它将被其他组件替换。

在stackblitz https://angular-hbb4qt.stackblitz.io上创建了一个样本