时间戳

首页 > 解决方案 > 路线不断被重定向

angular - 路线不断被重定向

问题描述

我正在创建一个简单的照片库应用程序。当用户选择图像时，它应该显示选择的图像。这是通过到另一个组件的路由来处理的，因此当用户单击他们想要查看的图像时，所选图像然后通过不同的组件自行显示。我遇到的问题是，当我在 UI 上选择图像时，url 正确更改为 localhost:4200/gallery/1 （表示图像 id 的 1），但仅持续一毫秒。然后它重定向回 l​​ocalhost:4200/gallery。

我已经仔细检查了我的路线，并且据我所知它们设置正确。我已将“图像全视图”路由嵌套为图库路由的子节点。

这些是我的路由模块中的相关路由：

const routes: Routes = [
  { path: '', redirectTo: '/gallery', pathMatch: 'full' },
  { path: 'gallery', component: GalleryComponent, children: [
    { path: ':id', component: ImageFullViewComponent},
  ]},

这是显示所有图像的画廊 html 文件（此处的路由器出口应该是下面的“图像全视图”组件）：

<ul class="container">
    <li class="item-list-container"><app-image-item
    class="image-item"
    *ngFor="let imageEl of images"
    [image]="imageEl"
    (click)="onImageSelect(imageEl.id)"
    ></app-image-item>
    </li>
</ul>
<router-outlet></router-outlet>

这是存储在画廊 ts 文件中的上面的 onImageSelect 方法：

onImageSelect(id: number) {
    this.router.navigate(['/gallery', id])
    console.log(id);
  }

这是应显示所选图像的“图像全视图”html 文件：

<div class="container">
    <img class="image-full-view" [src]="selectedImage.imagePath" alt="Man Praying">
    <p>{{ selectedImage.name }}</p>
</div>

最后，这是存储 selectedImage 的 'image-full-view' ts 文件：

selectedImage: Image;

  ngOnInit() {
    const id = this.route.snapshot.paramMap['id'];
    this.selectedImage = this.gallerService.getImage(id);
  }

抱歉，我知道这是很多代码，但我只包含了我认为相关的内容。希望有人能帮忙！

标签： angular

解决方案

推荐阅读