首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

返回上一页,其中包含以前在angular 8中输入的数据

在Angular中,你可以使用Location服务来返回上一页,并且可以通过路由参数或服务来传递之前输入的数据。下面是一个示例:

首先,在你的组件中,你可以使用Location服务来返回上一页。确保你已经导入了Location服务:

代码语言:javascript
复制
import { Location } from '@angular/common';

@Component({
  // 组件配置
})
export class MyComponent {
  constructor(private location: Location) {}

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

在上面的示例中,我们注入了Location服务,并在goBack()方法中使用this.location.back()来返回上一页。

如果你想在返回上一页时传递之前输入的数据,你可以使用路由参数或创建一个共享的数据服务。下面是一个使用路由参数的示例:

代码语言:javascript
复制
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  // 组件配置
})
export class MyComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  goBackWithData() {
    const previousData = 'Your previous data'; // 替换为之前输入的数据
    this.router.navigate(['previous-page'], { queryParams: { data: previousData } });
  }
}

在上面的示例中,我们使用this.router.navigate()方法导航到上一页,并通过queryParams选项传递之前输入的数据。

在上一页的组件中,你可以使用ActivatedRoute服务来获取传递的数据。例如:

代码语言:javascript
复制
import { ActivatedRoute } from '@angular/router';

@Component({
  // 组件配置
})
export class PreviousPageComponent {
  previousData: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.previousData = params['data'];
    });
  }
}

在上面的示例中,我们使用this.route.queryParams.subscribe()来订阅路由参数的变化,并将传递的数据存储在previousData属性中。

通过使用Location服务返回上一页,并使用路由参数或共享数据服务传递之前输入的数据,你可以实现在Angular中返回上一页并保留之前输入的数据的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第214天:Angular 基础概念

- 目前有一个全职开发团队继续开发和维护这个库 - 有了这一类框架就可以轻松构建 SPA 应用程序 - 轻松构建 SPA(单一页面应用程序) - 单一页面应用程序:   + 只有一个页面(整个应用一个载体...; - 模型就是用于存储数据 - 视图用于展现数据 - 登陆案例分析MVC思想 - 模型   + 我们数据库中所有用户信息   + 接受控制器传来用户名和密码进行校验业务逻辑并返回true/false...- 控制器   + 接受用户界面上填写用户名和密码   + 将用户名和密码交给模型 - 视图   + 给用户呈现一个表单   + 接受用户输入内容,并将其提交给控制器   + 根据控制器返回数据...$watch(‘totalCart’, calculateDiscount); $scope(上下文模型) 视图和控制器之间桥梁 用于视图和控制器之间传递数据 利用$scope暴露数据模型(数据,行为...    模型发生变化自动同步到视图上;     视图上数据发生变化过后自动同步到模型

1.9K30

【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

主要包含以下功能: 点击左右分页按钮可以跳转到上一页/下一页; 点击中间页码按钮可能跳转到相应页码; 首页尾页需要始终显示出来(如果只有1页则不显示尾页); 除首尾页之外,当前页码左右最多只显示2页...我们一起来看看怎么开发一个Angular组件吧。 同样是使用Angular CLI创建一个基础Angular项目,并输入命令npm start命令启动。...其中li元素绑定key值与Vue中key值作用类似。...$emit('change', this.current); }, } 当点击一页/下一页翻页按钮时都会调用该方法,传入改变后页码值。...定义一个List组件数据源dataSource,组件初始化(ngOnInit)时给dataSource设置初始分页数据(第一页数据),然后页码改变时重新设置dataSource值,不再赘言。

7.8K00
  • Angular 快速学习笔记(1) -- 官方示例要点

    组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务时,Angular...就会为 HeroService 创建一个单一、共享实例,并把它注入到任何想要它 c....添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...服务,用来与浏览器打交道,this.location.back() 返回一页 HTTP a.

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务时,Angular...就会为 HeroService 创建一个单一、共享实例,并把它注入到任何想要它 c....添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...服务,用来与浏览器打交道,this.location.back() 返回一页 HTTP a.

    3.7K50

    AngularJS浅谈-博客

    AngularJS 使得开发现代一页面应用程序(SPAs:Single Page Applications)变得更加容易。 AngularJS 把应用程序数据绑定到 HTML 元素。...模板:我们用html,css写ui视图代码,其中包含AngularJs指令,表达式,并最终会被AngularJs编译机制编译为附加在dom树上。...ui节点dom事件发生后AngularJs会自动转到scope某个行为(Action)逻辑。...MVC之间关系,下面这张图看一下MVC中都包含些什么东西 再看下面这张图-其中service是共用东西抽象出来服务 模块化 AngularJs模块(module):它是一个集合,相当于一个框子...每一个HTML文档中,只能有一个AngularJS应用可以被自动启动,HTML文档中第一个被找到定义根元素ng-app指令将会作为自动启动应用。

    2.4K30

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    你离开地方 在前一页中,您学会了仪表板和固定英雄列表之间导航,沿途编辑选定英雄。 这是这个页面的起点。 继续英雄之旅之前,请确认您具有以下结构。 ?...响应JSON有一个单一数据属性,它拥有主叫方想要英雄列表。 所以你抓住这个列表并把它作为已解决Future值返回。 请注意服务器返回数据形状。...它像以前一样接受英雄未来。 错误处理 getHeroes()结尾处,您可以捕获服务器故障并将其传递给错误处理程序。...添加保存英雄详情能力 英雄细节模板末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()新组件方法。...示例中,基础字符串流(_searchTerms.stream)表示由用户输入英雄名称搜索模式。 每次调用search()都会通过调用控制器add()将新字符串放入流中。

    11K30

    AngularDart4.0 指南- 用户输入

    例如,鼠标事件包含输入框编辑事件不同信息。 所有标准DOM Event对象都有一个target属性,它是引发事件元素引用。...从模板引用变量获取用户输入 还有另一种获取用户数据方法:Angular 模板引用变量提供了对模板内元素直接访问。 要声明模板引用变量,请在标识符前加一个哈希字符(#)。...代码使用box变量来获取输入元素值,并在标签之间进行插值显示。 模板是完全独立。 它不绑定到组件,组件什么也不做。 输入框中输入内容,然后观看每个按键显示更新。 ?...values=box.value"> {{values}} ''', ) class KeyUp4Component { String values = ''; } 把它放在一起 一页显示了如何显示数据...这些技术对于小型演示很有用,但是处理大量用户输入时会很快变得冗长和笨拙。 双向数据绑定是在数据输入字段和模型属性之间移动值更优雅和紧凑方式。

    3.5K00

    AngularJS入门 & 分页 & CRUD示例

    其中MVC理解如下: Model : 数据,其实就是 angular变量($scope.xx) View : 数据呈现 Controller : 操作数据,就是function,数据crud 二.AngularJS... {{100+100}} 2.2 ng-model: (双向绑定) ng-model 指令用于绑定变量/表单元素,这样用户文本框输入内容会绑定到变量...2.5 ng-controller: (指定控制器) $scope 贯穿整个AngularJS App应用,所有变量,函数,对象全都绑定在$scope对象中,它在视图和控制器间建立一个通道,基于作用域视图修改数据时会立刻更新... var app = angular.module("dintalk",[]); //$scope 是控制层和视图层交换数据桥梁...四.AngularJS CRUD 1.分页查询后台返回结果封装实体 /** * 分页查询响应结果,内含总记录数和当前页数据列表 * @author Mr.song * @date 2019

    3.3K40

    Angular 2 架构(下)

    Angular 渲染它们时,它会根据指令对 DOM 进行修改。 指令是一个带有"指令元数据"类。 TypeScript 中,要通过 @Directive 装饰器把元数据附加到类。...Angular包含以下三种类型指令: 属性指令:以元素属性形式来使用指令。 结构指令:用来改变DOM树结构 组件:作为指令一个重要子类,组件本质可以看作是一个带有模板指令。...*ngIf 表示只有选择项存在时,才会包含 SiteDetail 组件。...注入器是一个维护服务实例容器,存放着以前创建实例。 如果容器中还没有所请求服务实例,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回Angular 。...当所有的服务都被解析完并返回时, Angular 会以这些服务为参数去调用组件构造函数。 这就是依赖注入 。

    2.2K20

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    WijmoJS VSCode Designer还提供了一个独立命令,可以单独选项卡中打开设计图面,您可以在其中使用示例数据实例化控件,自定义其属性,并生成可以复制到源文件中Angular标记。...VS Code中打开该文件夹,然后打开文件src \ app.html,其中包含以下FlexGrid标记 注意标记上方出现灰色Wijmo Designer ...链接。...接下来,单击图例属性齿轮图标,并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active,为图表添加标题。...单击设计器左侧“源视图”图标以显示生成Angular标记。 从那里,突出显示要复制文本,并使用快捷键(Windows,Ctrl + C)将文本复制到剪贴板。...,生成标记包含表示Y轴,图表图例,三个数据系列和趋势线子元素。

    5.4K40

    使用 Angular Transfer State 一个具体例子

    这些页面将包含浏览器应用程序,因此用户可以加载第一页后使用 Angular 强大功能继续应用程序中导航。 您可以按照以下步骤尝试这个简单示例。...它可以将数据从应用程序服务器端传输到浏览器应用程序。 为此,服务器应用程序将在它生成 HTML 页面中添加我们要传输数据包含在此生成 HTML 页面中浏览器应用程序将能够读取此数据。...复制代码 现在,在为组件提供数据解析器中,我们可以使用 TransferState API: 服务器,我们首先注册 onSerialize 以提供我们将下载数据,然后我们从我们数据提供者那里获取数据...浏览器,我们使用get方法来获取server提供数据,我们直接提供这些数据。 我们还从传输状态中删除了提供数据,因此页面的重新加载将不再使用提供数据。...我们可以通过调用 hasKey 方法来检测我们是服务器还是浏览器应用程序。 此方法仅在浏览器中返回 true。

    68000

    AngularDart4.0 指南- 模板语法二 顶

    要监听值更改,代码会绑定到输入输入事件。 当用户进行更改时,将引发输入事件,绑定在包含DOM事件对象$event上下文中执行语句。... $event变量包含SizerComponent.sizeChange事件有效数据。...NgModel - 与[(ngModel)]形成元素双向绑定 开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入值并返回一个转换后值。...另一方面,属性路径中空值时不时出现可能还好,特别是当数据现在为空,将来将返回数据等待数据时候,视图应该没有怨言地呈现,而null属性路径应该像title属性一样显示为空白。

    30K20

    Angular快速学习笔记(2) -- 架构

    NgModule更像一个逻辑概念,是一个软件包概念。 1.1.4 Angular官方库 Angular 自带了一组 JavaScript 模块,你可以把它们看成库模块。...每个组件都会定义一个类,其中包含应用数据和逻辑,并与一个 HTML 模板相关联,该模板定义了一个供目标环境下显示视图。 ?...一个列表上进行迭代 {{hero.name}}、(click) 和 [hero]把程序数据绑定到及绑定回 DOM,以响应用户输入。... 双向绑定中,数据属性值通过属性绑定从组件流到输入框。用户修改通过事件绑定流回组件,把属性值设置为最新值。...如果所请求服务尚不存在,注入器就会使用以前注册服务提供商来制作一个,并把它加入注入器中,然后把该服务返回Angular。 ? 对于要用到任何服务,你必须至少注册一个提供商。

    5.3K20

    【17】进大厂必须掌握面试题-50个Angular面试

    Angular中,数据绑定是最强大,最重要功能之一,可让您定义组件与DOM(文档对象模型)之间通信。它从根本简化了定义交互式应用程序过程,而不必担心视图或模板与组件之间推送和提取数据。...Angular组件具有离散生命周期,其中包含从出生到死亡过渡不同阶段。为了更好地控制这些阶段,我们可以使用以下方法将其连接: 构造函数: 通过类上调用new创建组件或指令时将调用它。...31.通过对Angular进行脏检查,您了解什么? Angular中,摘要过程称为脏检查。之所以调用它,是因为它扫描整个范围以进行更改。换句话说,它将所有新作用域模型值与以前作用域值进行比较。...Angular中,服务是可替换对象,该对象使用依赖项注入连接在一起。通过将服务注册到要在其中执行模块中来创建服务。基本,您可以通过三种方式创建角度服务。...这是用于创建和配置服务方法。在这里,您可以创建一个对象,向其中添加属性,然后返回相同对象,并将工厂方法传递到控制器中。 45. 什么是Angular Global API?

    41.4K51

    Angular v8 发布!来看看有什么新功能

    本文中,我将介绍 Angular 8 和 Angular CLI 8 最重要新功能。我文中例子可以 GitHub 找到。...由于 Angular 大量底层部分已经为此进行了更改,因此 Angular 团队特别注意与以前 Angular 版本兼容性:切换到 Ivy 之后,现有的程序应该能够像以前一样工作。...在此之前,Angular 团队计划采取进一步措施以确保与旧版本兼容性。 Web worker 根据定义,JavaScript 是单线程。因此,对于数据调用等较大任务异步处理是很常见。.../lazy/lazy.module#LayzModule' 4} “#”号之前值表示通向模块实现文件路径;之后值代表其中包含类。.../lazy/lazy.module').then(m => m.LazyModule) 4} 新书写风格中仍然包含文件名作为魔术值。但是由于许多IDE支持导入,因此无效值将立即返回错误。

    3K30

    Angular2 脏检查过程

    这种做法乍一看非常低效,而实际Angular 2 变更检测系统可以几个毫秒内(具体数值和平台有关)进行成百上千次这样简单检测。至于我们是怎么达成如此感人效率,那是另一篇文章的话题了。...以前Angular无法利用这一点,而现在可以了。...Immutable(不可变)对象 如果一个组件只依赖于它那些输入属性,而这些属性是不可变类型,那么只有当其中一个输入属性发生变化时候这个组件才会发生改变。...,并且组件构成是一颗平衡树,那么使用可观察对象会把复杂度从O(N)降低到O(logN),其中N是系统中数据绑定总数量。...即使在这种情况下,传播变更时候,变更检测系统一样能够最小化必要检测次数。 小结 ● Angular 2 应用是一个反馈式系统。 ● 变更检测系统会按照从根到叶子顺序传播数据绑定。

    2.6K80

    Angular和Vue.js 深度对比

    双向绑定 Vue 提供了 v-model 指令(用于更新用户输入事件数据),使得表单输入和结构元素实现双向绑定变得很容易。它可以选择正确方式来更新输入类型相关元素。 5....谷歌2009年开发出了 Angular 并对其提供支持,Angular 包含一个基于标准 JavaScript 和 HTML JS 代码库。...尽管 Vue 和 Angular 一些语法类似,比如 API 和设计(这是因为 Vue 实际是从 Angular 早期开发阶段中获得启发),但 Vue 一直致力于一些对于 Angular 来说很困难方面提升自己...更简单编程模型使 Vue 能够提供更好性能。Vue 可以没有构建系统情况下使用,因为开发者可以将其包含在 HTML 文件中。这使得 Vue 易于使用,从而提高了性能。...包含标记,样式和行为代码可以帮助开发者构建高效且可重用接口。 Angular 中,控制器和指令等实体包含在模块中,而 Vue 模块中包含组件逻辑。

    5.4K30

    Angular和Vue.js 深度对比

    双向绑定 Vue 提供了 v-model 指令(用于更新用户输入事件数据),使得表单输入和结构元素实现双向绑定变得很容易。它可以选择正确方式来更新输入类型相关元素。 5....谷歌2009年开发出了 Angular 并对其提供支持,Angular 包含一个基于标准 JavaScript 和 HTML JS 代码库。...尽管 Vue 和 Angular 一些语法类似,比如 API 和设计(这是因为 Vue 实际是从 Angular 早期开发阶段中获得启发),但 Vue 一直致力于一些对于 Angular 来说很困难方面提升自己...更简单编程模型使 Vue 能够提供更好性能。Vue 可以没有构建系统情况下使用,因为开发者可以将其包含在 HTML 文件中。这使得 Vue 易于使用,从而提高了性能。...包含标记,样式和行为代码可以帮助开发者构建高效且可重用接口。 Angular 中,控制器和指令等实体包含在模块中,而 Vue 模块中包含组件逻辑。

    3.8K10
    领券