后退按钮指令 Angular

在Angular应用程序中，后退按钮指令是一个非常有用的指令，它允许用户通过单击一个按钮或通过键盘快捷键来返回上一个历史记录。

安装

您可以使用npm包管理器安装后退按钮指令：

npm install ng2-back-button --save

使用

1. 首先，您需要将BackButtonModule导入到您的应用程序模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BackButtonModule } from 'ng2-back-button';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BackButtonModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.接下来，在你的组件里面，你需要将BackButtonDirective导入到你的组件模块中：

import { Component } from '@angular/core';
import { BackButtonDirective } from 'ng2-back-button';

@Component({
  selector: 'my-app',
  template: `
    <button back-button>Go back</button>
  `
})
export class AppComponent { }

3. 最后，你需要将routerLink中添加一个参数，这个参数可以是一个对象，它可以帮助你跟踪最后一个页面：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <button [routerLink]="[{ outlets: { action: 'list' } }]">Go to list</button>
  `
})
export class AppComponent {
  constructor(private router: Router) { }
}

这样，当用户单击“Go back”按钮时，它将返回到上一个页面。

结论

后退按钮指令是一个非常有用的指令，它可以帮助用户通过单击一个按钮或通过键盘快捷键来返回上一个历史记录。它非常容易设置，并且可以方便地与Angular的路由器框架结合使用。