javascript - 为什么我不能走子组件的路线？

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