关于 Angular 应用对浏览器 Back 按钮支持问题的讨论

简介: 关于 Angular 应用对浏览器 Back 按钮支持问题的讨论

需求1:如果开发人员想禁用整个应用程序或多个组件的后退按钮

需求2:如果只想禁用特定组件的后退按钮

对于第一个要求,一个可行的办法是,实现一个 Guard 并将其应用于所需的路由。


示例代码:

import { LocationStrategy } from '@angular/common';
@Component({
  selector: 'app-root'
})
export class AppComponent {
  constructor(
    private location: LocationStrategy
  ) {
    history.pushState(null, null, window.location.href);
    // check if back or forward button is pressed.
    this.location.onPopState(() => {
        history.pushState(null, null, window.location.href);
        this.stepper.previous();
    });
  }
}


Spartacus 项目里 RoutingService 的 back 方法实现。Visual Studio Code 的 peek reference 功能显示,没有其他代码调用了这个 back 方法。

eb3f59a1f29e770c81132ddb4aa9ffe7.png


e06f4ffc539c885438d92438b319deda.png

Angular 中的 CanDeactivate Guard 可用于避免导航到与应用程序相同域的另一个页面


当我们在浏览器地址栏输入一个新的 URL 地址时,我们得到一个新页面,这个 URL 保存在浏览器历史记录中。 使用这个历史记录,我们可以回退到以前浏览过的页面。


像 Angular 这样的 SPA 应用程序呢? 大多数情况下,在 Angular 中我们有一个静态路由,但我们会更改当前页面上的内部组件。


标准浏览器历史记录对 Angular 这种单页面应用不起作用。我们可以编写自己的服务,当用户在我们的 Angular 应用程序中更改路由时监听。新 Route 将被保存,当用户点击后退按钮时,我们给出最后保存的路由记录。


在我们存储路线历史的导航服务中,我们订阅了 Route 更改事件。 我们将每条新路线保存在一个数组中。 显然,这个服务包含了一个获取之前路由并返回的方法。

8ad343c49442ecffa59916bb6998e90c.png

Spartacus 针对这个 navigationEnd 事件并没有特殊的处理:

3fbc5d187efca41a678a5b5c96b4e8f0.png

看个具体的例子。

UserListComponent 应该包含所有用户的列表,而 ActiveUsersComponent 只包含部分用户。 这两个组件都将链接到 UserDetailComponent,然后我们希望从该组件导航回来。

const routes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      { path: '', component: UserListComponent },
      { path: 'active', component: ActiveUsersComponent },
      { path: ':id', component: UserDetailComponent },
    ],
  },
  { path: '**', redirectTo: 'users' },
]

静态路由


一种解决方案是在详细信息组件中定义路由器链接,并使用绝对路由显式导航回父级:

<a routerLink="/users">Back with Absolute Routing</a>


或者,也可以从组件类以编程方式执行此操作,但请记住,router links 比通过点击事件触发的导航从语义上来说更清晰。

import { Router } from '@angular/router'
@Component({...})
export class UserDetailComponent {
  constructor(private router: Router) {}
  back(): void {
    this.router.navigate('/users')
  }
}


相关文章
|
1月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
32 0
|
1月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
43 0
|
21天前
|
存储 人工智能 应用服务中间件
Web应用是一种通过互联网浏览器和网络技术在互联网上执行任务的计算机程序
【5月更文挑战第30天】Web应用是一种通过互联网浏览器和网络技术在互联网上执行任务的计算机程序
28 2
|
30天前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
1月前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
47 8
|
1月前
|
Web App开发 前端开发 JavaScript
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
1月前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
32 3
|
1月前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
42 1
|
1月前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
|
1月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。

热门文章

最新文章