Question

我有一个HTML页面，其中有4-5左右的图像列表。 个人图片（item-detail.component.html）的HTML代码如下所示：

<span class="badge" id="heart-badge{{item.$id}}">
  <div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
    <img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
  </div>
  <div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
    <img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
  </div>
</span>

<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
    <img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
    <div class="card-body">
        <div class="auction-item-title">
            <h1 id="auction-item-title">{{item.name}}</h1>
        </div>
        <div class="auction-item-bid-title">
            <div class="auction-item-title-left">
                <p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
                <p id="auction-item-bid-title">Value: ${{item.value}}</p>
            </div>

            <div class="auction-item-title-right">
                <p id="auction-item-bid-title2">About this item</p>
            </div>

        </div>
    </div>
</a>
<bid-button [item]="item"></bid-button>

现在，如果我点击上面的项目（，因为你可以看到它上面有一个href标签），那么它会在新页面上显示该图像的详细描述，并且该页面还有一个后退按钮在顶部。以下是该新页面上的后退按钮代码：

<div class="item-top-bar">
    <div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
    </div>
    <div class="item-pagination-bar">
        <a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
        <a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
    </div>
</div>

问题陈述：

现在，如果我点击后退按钮然后它会转到主页，但我想要的是它应该带我到我之前的图像部分。

这可能吗？我的意思是，如果我有可能部分的图像和如果我点击让我们说第四张图像然后它将打开第四张图像页面的详细描述现在，如果我按下后退按钮然后它应该带我到第四部分的图像，我在此之前。

Answer 1

如果你想回去，你应该在javascript中使用back（）函数

function goBack() {
    window.history.back();
}

<button onclick="goBack()">Go Back</button>

以下是如何使用它的一个小示例，现在您可以将其调整到您的页面

Answer 2

你可以通过在这里添加id

来做到这一点

window.location

现在有多种方法可以获得id。您可以使用{{1}}属性，或者如果在同一个组件中将此{{1}}传递给属性绑定

Answer 3

我将如何做到这一点。另外，在多个级别上使用相同的ID可能不是一个好主意。

<div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
    </div>

<script>
window.document.getElementById('back').addEventListener('click', function(e){
     window.history.back();
     e.preventDefault();
});
</script>

Answer 4

Angular有Location这是一项服务，应用程序可以使用该服务与浏览器的URL进行交互。这是您解决问题所需要的。见下面的实现。

<div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
    </div>

你的ts文件应该有这些行。

import {Component} from '@angular/core';
import {Location} from '@angular/common';

@Component({
// component's declarations here
})
class SomeComponent {
    constructor(private _location: Location) {
    }
    goBackClicked() {
        this._location.back();
    }
}

Answer 5

如果您的页面已滚动并希望在从详细说明页面返回时保持滚动位置，则可以将当前页面的垂直滚动位置存储在服务中在导航回来时，您可以从服务中设置回滚动位置。

链接到MDN中的ScrollTop。同时检查Window.To是否滚动。

示例角色项目展示Element.ScrollTop：https://stackblitz.com/edit/angular-qdjmny。

点击第1页，滚动示例列表进行导航，当你回来时，将保留scoll。

另外，请确保在详细说明页的[routerLink]链接到item-detail.component.html组件。

Answer 6

不仅仅是在用 .position（）点击图像时获取图像的位置，当从图像返回到页面时，您可以使用 $返回到相同的位置（窗口）.scrollTop（值）

Answer 7

真的是这些评论是对的。如果你想返回页面，你可以使用命令window.history.go（-1）或window.history.back（）

Answer 8

您可以为此使用锚标记。您需要将页面的一部分返回“ id”，例如“ gobackto_id”。然后，您可以像这样在“ href”的“”元素中使用它：

<a href="http://www.mypage.be/home#gobackto_id".

在点击图片之前，如何确保后退按钮将我带到我所在的区域？

8 个答案: