角度：单击浏览器后退按钮将用户带回家 [英] Angular: take user to home on clicking browser back button
问题描述
如果用户位于我的角度平台中，我想将用户带到主页，如果用户单击浏览器的后退按钮。
I want to take the user to the home page when a user clicks on the back button of the browser if the user is in my angular platform.
有边缘情况也要处理，
如果用户通过谷歌搜索，Fb或直接输入链接进入我们的平台，那么我们就无法执行此操作，但是如果他已经在我们的平台中漫游，那么我们不会不想让每个后退按钮将用户带回家。
There is an edge case as well which is to be handled, if user has come to our platform via google search, Fb or direct entering link, then we cant this behavior but if he ia already roaming around in our platform then we don't want each back button to take user to home.
ie
-
用户输入链接，然后按按钮=>带他回家。
User Enter the link and press button => take him to home.
用户输入链接，然后单击按钮或链接以及应用程序状态更改后，现在用户单击浏览器后退按钮=>将用户带回previos页面（正常行为）
User Enters the link and now clicks on a button or link and app state is changed, now user clicks browser back button => take user back to previos page (normal behaviour)
演示：
单击下面的链接，然后在Google搜索上单击第一个链接，然后尝试按浏览器的后退按钮，您会看到它带您进入主页。
Demo: click on the link below and and then click on the 1st link on google search and then try hitting browser back button you will see it takes you to the home page.
我尝试使用pushState（）实现它
I tried to implement it using pushState()
ngAfterViewInit() {
console.log('init called');
var x = document.referrer;
console.log('ref', x);
console.log(this.angLocation.path());
if (x) {
console.log('pushing state');
this.location.pushState({id:'page3'}, 'Page3', '/page3');
}
}
点击下面的链接即可查看其运行情况
/// https：// angulartet> 2。 fbclid = IwAR1zP_UTnCQxKMp8o3ZXf-n4NR3ftu_4JoulLqItaONa-_wSPJ_DT95OgRU
Click on the link below see it in action https://angular-tet5fy.stackblitz.io/page2?fbclid=IwAR1zP_UTnCQxKMp8o3ZXf-n4NR3ftu_4JoulLqItaONa-_wSPJ_DT95OgRU
预期的行为：
1.单击链接会将用户带到第2页。
2.初始化page2时，应将状态 / page3推送到浏览器历史记录中。
3.现在，当用户单击浏览器时，它应该进入/ page3，因为它已在上面的步骤2中被推到历史记录中。
Expected behavior: 1. Clicking on the link takes the user to page2. 2. While page2 is initialized it should push state '/page3' to the browser history. 3. When the user clicks the browser back now it should take to /page3 as it is was pushed to history in step2 above.
当前行为：
1.单击链接，将我带到page2，但是在推送状态时它会自动重定向到/ page3。
2.单击浏览器后，它带我回到/ page2。
Current Behaviour: 1. Clicking on the link, takes me to page2 but it automatically redirects to /page3 while pushing state. 2. When clicked browser back, it takes me back to /page2.
推荐答案
他们在该页面中的操作有点棘手。
诀窍是使用 history.pushState 创建新的历史记录，然后订阅该位置的pop事件以将网页更改为首页。
What they did in that page is a bit tricky.
The trick is creating a new history with history.pushState and then subscribe to the pop event of the location to change the webpage to the home .
我建议做一些不同且更容易的事情，该代码只需要以下几行：
I suggest to do something a little different and easier, that code only needs this lines:
let locat = location.href;
if (!!window.location.pathname && window.location.pathname !== '/') {
history.replaceState(null,null,location.origin);
history.pushState(null, null,locat);
}
我们在这里所做的是将URL更改为您要使用<$的房屋c $ c> history.replaceState（null，null，location.origin）; ，然后使用 history.pushState（null，null，locat）在历史记录中新建一个条目; 并带有第一个网址。
What we do here it's change the url to the home you want with history.replaceState(null,null,location.origin); and then make a new entry in the history with history.pushState(null, null,locat); witht he first url.
此处的示例：
https：/ /stackblitz.com/edit/angular-stack-home-redirect-history?file=src/app/app.component.ts
尝试一下此处：
https：// angular-stack-home-redirect- history.stackblitz.io/bye
这篇关于角度：单击浏览器后退按钮将用户带回家的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
