Question

有没有一种聪明的方法可以回到Angular 2的最后一页？

像

这样的东西

this._router.navigate(LASTPAGE);

例如，页面C有一个 Go Back 按钮，

页面A - ＆gt;页面C，单击它，返回页面A.
Page B - ＆gt;页面C，单击它，返回到页面B.

路由器是否有此历史信息？

Answer 1

实际上，您可以利用内置的位置服务，该服务拥有“后退”API。

这里（在TypeScript中）：

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

@Component({
  // component's declarations here
})
class SomeComponent {

  constructor(private _location: Location) 
  {}

  backClicked() {
    this._location.back();
  }
}

Answer 2

在Angular 2.x / 4.x的最终版本中 - 这是文档https://angular.io/api/common/Location

/* typescript */

import { Location } from '@angular/common';
// import stuff here

@Component({
// declare component here
})
export class MyComponent {

  // inject location into component constructor
  constructor(private location: Location) { }

  cancel() {
    this.location.back(); // <-- go back to previous location on cancel
  }
}

Answer 3

使用Angular 5.2.9

进行测试

如果您使用锚点而不是按钮，则必须使用href="javascript:void(0)"将其设置为被动链接，以使角色位置正常工作。

<强> app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  constructor( private location: Location ) { 
  }

  goBack() {
    // window.history.back();
    this.location.back();

    console.log( 'goBack()...' );
  }
}

<强> app.component.html

<!-- anchor must be a passive link -->
<a href="javascript:void(0)" (click)="goBack()">
  <-Back
</a>

Answer 4

您可以在路由类上实现routerOnActivate()方法，它将提供有关以前路由的信息。

routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) : any

然后，您可以使用router.navigateByUrl()并传递从ComponentInstruction生成的数据。例如：

this._router.navigateByUrl(prevInstruction.urlPath);

Answer 5

我制作了一个按钮，我可以在我的应用上的任何地方重复使用。

创建此组件

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

@Component({
    selector: 'back-button',
    template: `<button mat-button (click)="goBack()" [color]="color">Back</button>`,
})
export class BackButtonComponent {
    @Input()color: string;

  constructor(private location: Location) { }

  goBack() {
    this.location.back();
  }
}

然后在需要后退按钮时将其添加到任何模板。

<back-button color="primary"></back-button>

注意：这是使用Angular Material，如果您不使用该库，则删除mat-button和color。

Answer 6

当我需要像文件系统一样向后移动时，也适合我。的 P.S。 @angular：＆＃34; ^ 5.0.0＆＃34;

<button type="button" class="btn btn-primary" routerLink="../">Back</button>

Answer 7

在RC4中：

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

Answer 8

您可以将其放入可以附加到任何可点击元素的指令中：

this.setState()

用法：

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
import Select from "react-select";
import { clearCurrentProfile, getCurrentProfile } from "../actions";

const options = [
  { value: "todos?userId=1", label: "Todos" },
  { value: "comments?postId=1", label: "Comments" },
  { value: "users?id=1", label: "Users" },
  { value: "albums?userId=1", label: "Albums" }
];

class SelectOption extends Component {
  state = {
    selectedOption: []
  };

  handleSubmit = e => {
    e.preventDefault();
    const { getCurrentProfile, history } = this.props;
    const { value } = this.state.selectedOption;

    this.setState({ selectedOption: [] }, () =>
      getCurrentProfile(value, history)
    );
  };

  handleChange = selectedOption => this.setState({ selectedOption });

  render = () => (
    <div className="container">
      <form onSubmit={this.handleSubmit}>
        <Select
          value={this.state.selectedOption}
          onChange={this.handleChange}
          options={options}
        />
        <div className="save-button">
          <button type="submit" className="uk-button uk-button-primary">
            Save Preferences
          </button>
        </div>
        <div className="clear-button">
          <button
            type="button"
            onClick={this.props.clearCurrentProfile}
            className="uk-button uk-button-danger"
          >
            Reset Preferences
          </button>
        </div>
      </form>
    </div>
  );
}

export default connect(
  state => ({ profile: state.profile }),
  { clearCurrentProfile, getCurrentProfile }
)(withRouter(SelectOption));

SelectOption.propTypes = {
  clearCurrentProfile: PropTypes.func.isRequired,
  getCurrentProfile: PropTypes.func.isRequired,
  profile: PropTypes.shape({
    profile: PropTypes.arrayOf(PropTypes.object),
    profiles: PropTypes.arrayOf(PropTypes.object),
    loading: PropTypes.bool
  }).isRequired
};

Answer 9

在获得所有这些很棒的答案之后，我希望我的答案能够找到人并帮助他们。我写了一个小服务来跟踪路线历史。在这里。

write.table

Answer 10

我在导航到不同页面时的方式通过传递当前位置

添加查询参数

this.router.navigate(["user/edit"], { queryParams: { returnUrl: this.router.url }

在您的组件中阅读此查询参数

this.router.queryParams.subscribe((params) => {
    this.returnUrl = params.returnUrl;
});

如果存在returnUrl，则启用后退按钮，当用户单击后退按钮时

this.router.navigateByUrl(this.returnUrl); // Hint taken from Sasxa

这应该可以导航到上一页。而不是使用location.back我认为上述方法更安全，考虑用户直接登陆您的页面的情况，如果他按下带有location.back的后退按钮，它会将用户重定向到不是您的网页的上一页。

Answer 11

也许您想检查之前的历史记录点是否在您的应用中。例如，如果您直接进入您的应用并执行 location.back()（例如，通过按工具栏中的 <- back 按钮），您将返回浏览器的主页，而不是去其他地方在您的应用内。

我是这样检查的：

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-foo',
  template: ''
})
export class FooComponent {

  private readonly canGoBack: boolean;

  constructor(
    private readonly route: ActivatedRoute,
    private readonly router: Router,
    private readonly location: Location
  ) {
    // This is where the check is done. Make sure to do this
    // here in the constructor, otherwise `getCurrentNavigation()`
    // will return null. 
    this.canGoBack = !!(this.router.getCurrentNavigation()?.previousNavigation);
  }

  goBack(): void {
    if (this.canGoBack) {
      // We can safely go back to the previous location as
      // we know it's within our app.
      this.location.back();
    } else {
      // There's no previous navigation.
      // Here we decide where to go. For example, let's say the
      // upper level is the index page, so we go up one level.
      this.router.navigate(['..'], {relativeTo: this.route});
    }
  }

}

我们检查加载当前路线的导航是否有前一个兄弟。这必须在构造函数中完成，而导航过程仍处于活动状态。

这并非没有警告：

canGoBack 即使之前的位置实际上在我们的应用程序中，但页面已刷新，也将为 false。
用户可能希望通过点击浏览器的后退按钮“返回”到上一页（goBack() 出现的位置），但由于应用返回历史记录而不是推送新位置，因此用户会更进一步，可能会感到困惑。

Answer 12

以角度4使用preserveQueryParams，例如：

url: /list?page=1

<a [routerLink]="['edit',id]" [preserveQueryParams]="true"></a>

点击该链接后，您将被重定向edit/10?page=1，保留参数

参考：https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

Answer 13

自测试版18开始：

import {Location} from 'angular2/platform/common';

Answer 14

要在不刷新页面的情况下返回，我们可以在html中进行如下操作 javascript：history.back（）

<a class="btn btn-danger" href="javascript:history.back()">Go Back</a>

Answer 15

我使用这种方式：

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

@Component({
    selector: 'Back_page',
    template: `<button  (click)="onBack()">Back</button>`,
})
export class BackPageComponent {
  constructor(private location: Location) { }

  onBack() {
    this.location.back();// <-- go back to previous location
  }
}

Answer 16

另一种解决方案

window.history.back();

Answer 17

是的，您可以做到。将此代码写在您的打字稿组件上，即可享受！

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

@Component({
    selector: 'return_page',
    template: `<button mat-button (click)="onReturn()">Back</button>`,
})
export class ReturnPageComponent {
  constructor(private location: Location) { }

  onReturn() {
    this.location.back();
  }
}

如何回到最后一页

17 个答案:

使用Angular 5.2.9