Question

我正在编写一个Angular2应用程序，我想从浏览器处理后退和前进按钮。

这个想法是在控制台上写一条消息，然后回复＆＃34;点击和不同的消息＆＃34;转发＆＃34;单击。

我使用了这段代码：

import { Location } from '@angular/common';
export class AppComponent implements OnInit {
   constructor(private location: Location) {}
    ngOnInit() {
       this.location.subscribe(x => { [custom message]  });
    }
}

问题是：我无法识别单击是否向后或向前在控制台中写入正确的消息。

如何在angular2中查看？我不知道我应该在google上搜索什么。所有的答案都是要处理这个事件，但要区分它。

P.S。它适用于我，如果它是在JavaScript中。谢谢。

Answer 1

我还需要区分Angular（5）中的后退和前进按钮，在我的情况下是为动画路径转换。我无法找到解决方案，所以我想出了一个解决方案。

将以下内容添加到服务中。

private popState: boolean = false;
private urlHistory: string[] = [];
private popSubject: Subject<boolean> = new Subject();

constructor(private location: Location, private router: Router) {

    location.subscribe(event => {
        let fwd = false;
        if (this.urlHistory.lastIndexOf(event.url)) {
            this.urlHistory.push(event.url);
        }
        else {
            fwd = true;
            this.urlHistory.pop();
        }
        this.popState = true;
        this.popSubject.next(fwd);
    })

    router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            if (!this.popState)
                this.urlHistory = [this.router.url];
            this.popState = false;
        }
    })
}

get popEvent$() {
    return this.popSubject.asObservable();
}

进口：

import { Location } from '@angular/common';
import { NavigationEnd, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

如果您不需要在外部监听活动，请删除popSubject和popEvent $。

识别Angular2中的后退/前进浏览器按钮

1 个答案: