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

Angular 2如何让setter等待输入setter完成

Angular 2是一种流行的前端开发框架,它采用了响应式编程的思想,通过使用组件和数据绑定来构建用户界面。在Angular 2中,setter方法可以用来监听和响应属性的变化。下面是关于如何让setter等待输入setter完成的完善答案:

在Angular 2中,可以使用@Input装饰器来定义一个属性,并使用setter方法来监听该属性的变化。当属性的值发生变化时,setter方法会被自动调用。

要让setter等待输入setter完成,可以使用asyncawait关键字来实现。首先,将setter方法声明为异步函数,即在方法前面加上async关键字。然后,在setter方法内部使用await关键字来等待输入setter完成。

下面是一个示例代码:

代码语言:typescript
复制
private _inputValue: string;

@Input()
set inputValue(value: string) {
  this._inputValue = value;
  this.processInputValue();
}

async processInputValue() {
  // 等待输入setter完成
  await this.delay(1000);
  
  // 在这里进行输入setter完成后的操作
  console.log('输入setter已完成');
}

delay(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

在上面的示例中,inputValue是一个属性,当它的值发生变化时,inputValue的setter方法会被调用。在setter方法内部,我们使用await this.delay(1000)来等待输入setter完成,这里的delay方法是一个异步函数,它会延迟指定的时间(这里是1秒)。

通过这种方式,我们可以让setter方法在输入setter完成后再执行后续的操作,确保输入setter完成后再进行相关处理。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云函数(SCF)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。您可以根据实际需求选择不同配置的云服务器,以满足您的需求。了解更多信息,请访问:腾讯云云服务器(CVM)
  • 腾讯云函数(SCF):是一种无服务器计算服务,可以帮助您构建和运行无服务器应用程序。您可以使用腾讯云函数来处理和响应事件,而无需管理服务器。了解更多信息,请访问:腾讯云函数(SCF)

以上是关于Angular 2如何让setter等待输入setter完成的完善答案,希望对您有帮助!

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

相关·内容

Vue.js简介

作为前端的三大框架之一(其他两个是Angular、React),Vue得到了大多前端开发者的青睐,最新版本为2.4.4 。...那么ViewModel是如何实现双向绑定的呢? ? Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。...用户看不到 getter/setter,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。...2,安装cnpm 安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。...接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包: cnmp install 接下来,在命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功

5.6K70

Vue.js快速入门

作为前端的三大框架之一(其他两个是Angular、React),Vue得到了大多前端开发者的青睐,最新版本为2.4.4 。...那么ViewModel是如何实现双向绑定的呢? ? Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。...用户看不到 getter/setter,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。...2,安装cnpm 安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。...接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包: cnmp install 接下来,在命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功

2.2K90
  • vue响应式原理(数据双向绑定的原理)

    比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。...Controller - Controller完成业务逻辑后,要求Model改变状态 - Model将新的数据发送到View,用户得到反馈 所有通信都是单向的。...angular.js只有在指定的事件触发时,进入脏值检测,大致如下: - DOM事件,譬如用户输入文本,点击按钮等(ng-click) - XHR响应事件($http) -...首先,需要对observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter getter。这样的话,给这个对象的某个属性赋值,就会触发setter,那么就能监听到数据变化。...(其实是通过Object.defineProperty()实现监听数据变化的) 2.

    2.7K40

    Angular开发实践(四):组件之间的交互

    Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是两个或多个组件之间交互的方法。...父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化。...1 @Input() paramTwo: any; // 输入属性2 } 子组件通过@Input()定义输入属性paramOne和paramTwo(属性值可以为任意数据类型) 父组件: @Component...通过 setter 截听输入属性值的变化 在实际应用中,我们往往需要在某个输入属性值发生变化的时候做相应的操作,那么此时我们需要用到输入属性的 setter 来截听输入属性值的变化。...2 } 在上面的代码中,我们可以看到通过paramOne属性的 setter 将拦截到的值val赋值给内部私有属性paramOneVal,达到父组件传递数据给子组件的效果。

    3.4K80

    Angular Input和Output

    Input 是属性装饰器,用来定义组件内的输入属性。在实际应用场合,我们主要用来实现父组件向子组件传递数据。...& getter setter 和 getter 是用来约束属性的设置和获取,它们提供了一些属性读写的封装,可以代码更便捷,更具可扩展性。...通过 setter 和 getter 方式,我们对类中的私有属性进行了封装,能避免外界操作影响到该私有属性。...此外通过 setter 我们还可以封装一些业务逻辑,具体示例如下: counter.component.ts import { Component, Input } from '@angular/core...当 Angular 在解析模板时,遇到 [(modelName)] 形式的绑定语法,它会期待这个指令中会存在一个名为 modelName 的输入属性和一个名为 modelNameChange 的输出属性

    2.4K50

    Change Detection And Batch Update

    那么这里就有两个很重要的问题了:当数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。 React Virtual DOM ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏值检测有点像,但是Angular2的更新没有副作用...如果我们连续更新数据,Vue会立马更新DOM还是和React一样先缓存下来等待状态稳定进行批量更新呢?...(1); setter(2); Vue是通过JavaScript单线程的特性,利用事件队列进行批量更新的。

    3.7K70

    前端三大框架vue,angular,react大杂烩

    这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...-> Angular2    Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。    React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离问题复杂化了。

    3K90

    前端三大框架vue,angular,react大杂烩

    这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...-> Angular2    Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。    React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离问题复杂化了。

    2.1K60

    Vue常见面试题--简书01

    home'> router-link标签会渲染为标签,咋填template中的跳转都是这种; 另一种是编程是导航 也就是通过js跳转 比如 router.push('/home') 3.如何...Watcher,当对a.b求值的时候,就会触发它的getter,当修改a.b的值的时候,就会触发它的setter,同时会通知被关联的Watcher,然后Watcher就会再次对a.b求值,计算对比新旧值...,当值改变了,Watcher就会通知到指令,调用指令的update()方法,由于指令是对DOM的封装,所以就会调用DOM的原生方法去更新视图,这样就完成了数据改变到视图更新的一个自动过程 5.Vue...对比其他框架原理 Vue相对于React,Angular更加综合一点。...你可以把一些视图逻辑放在一个ViewModel里面,很多view重用这段视图逻辑。 *独立开发。

    77230

    前端三大框架大杂烩

    1.3、脏检测的利弊   和ember.js等技术的getter/setter观测机制相比(优):   getter/setter当每次对DOM产生变更,它都要修改DOM树的结构,性能影响大,Angular...2、视图渲染 Angular1   AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...-> Angular2   Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得更清晰。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。   React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离问题复杂化了。

    2.6K50

    实战 | Change Detection And Batch Update

    如何感知到数据变化的呢?...Angular2 当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏值检测有点像,但是Angular2...setter Vue通过Object.defineProperty将data转化为getter/setter,这样我们直接修改数据时,Vue就能够感知到数据的变化了,这个时候就可以进行UI更新了。...如果我们连续更新数据,Vue会立马更新DOM还是和React一样先缓存下来等待状态稳定进行批量更新呢?...config.async 我们可以通过将Vue.config.async设置为false,关闭异步更新机制,它变成同步更新,看下面的例子: 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式

    3.2K20

    基础 - 从模板语法数据绑定、指令到计算属性总结

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者、社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓的争论...message: 'v-bind绑定标签特性', isButtonDisabled: false } }) 2)...this.message); } } }) 从我个人而言,在这里相比之下,vue的代码编写风格更加简洁,通俗易懂; 计算属性和观察者 vue支持内联表达式,可以完成简单的布尔操作...丶计算属性的setter,像上面那样,一般computed计算属性默认只有一个getter,但是如果有需要可以提供一个setter给计算属性; {{fullName}} // 计算属性的setter var app13 = new Vue({ el: '#app13', data: { firstName

    1.9K90

    Vue全家桶

    Vue全家桶一、Vue1.1 Vue概述Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式的js框架,发布于 2014 年 2 月。...Vue.js 压缩后有只有 20多kb (Angular 压缩后 56kb+,React 压缩后 44kb+)b.移动优先。...更适合移动端,比如移动端的 Touch 事件c.易上手,学习曲线平稳,文档齐全d.吸取了 Angular(模块化)和 React(虚拟 DOM)的长处,并拥有自己独特的功能,如:计算属性e.开源,社区活跃度高...这些 getter/setter 对用户来说是不可见的,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。...这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

    40020

    WPF 应用启动过程同时启动多个 UI 线程且访问 ContentPresenter 可能让多个 UI 线程互等

    如果有某个线程在执行静态构造函数,那么其他的线程将需要等待静态构造函数执行完成才能继续碰类型。...也就是说 ContentPresenter 的静态构造函数必须等待主 UI 线程释放锁才能完成,然而主 UI 线程必须等待 ContentPresenter 的静态构造函数执行完成才能释放锁 于是就构成了两个线程相互等待...执行在新 UI 线程的 ContentPresenter 的静态构造函数在等待主 UI 线程释放锁才能执行完成。主 UI 线程在等待新 UI 线程的静态构造函数执行完成。...新 UI 线程在等待主 UI 线程等待静态构造函数执行完成之后释放的锁 两个 UI 线程进入摸鱼,应用就起不来 看到以上的原理,在实际的应用里面,想要遇到这个坑还是很难。...再加上静态构造函数只能被调用一次,这就让其他多线程碰到此类型,都需要等待静态构造函数执行完成

    65210

    idea企业开发之插件推荐

    打开设置界面,点击 Plugins ,在搜索栏输入 GenerateAllSetter ,再按回车,点击 Install 安装 安装完成后,点击重启 使用的时候,在待生成 setter...with default values : 设置默认值,同时产生所有setter generate setter getter converter : 用于数据的适配 2.2 快捷键提示插件 简介:介绍如何安装使用快捷键提示插件...比如,用鼠标 run 一个代码,就会自动弹出run的快捷键 2.3 lombok插件 简介:介绍Class的属性自动生成getter、setter的插件。...打开设置界面,点击 Plugins ,搜索 AceJump ,敲回车,再点击安装 安装完成后,按快捷键 ctrl+; (该快捷键是插件默认的),按完后如下所示 再输入一个字符(这里输入 e 来演示...如果项目复杂,执行命令后的过程会比较久,使用这个插件的话就不用耗那么多时间等待

    1.1K10

    Angular Elements 及其工作原理

    关于如何通过 @angular/elements 创建一个 Custom Element,已经有大量的文章进行阐述,所以在这篇文章将深入一点,对它在 Angular 中的具体工作原理进行剖析。...这也是我们开始研究 Angular Elements 的一系列文章的原因,我们将在其中详细解释 Angular 如何Angular Elements 的帮助下实现 Custom Elements API...可以通过 Custom Elements API 来完成这件事。在文章的后续章节,我们将演示如何使用 Angular 组件的 @Input 装饰器与 这个 name 属性保持同步。...to do a property -> attribute reflection // 通过 setter完成类属性到元素属性的映射操作 set name(val) { this.setAttribute...顺便,关于如何动态构造 Angular 组件可以通过阅读Dynamic Components in Angular这篇文章进行了解。它其中阐述的运作机制和我们这里使用的一模一样。

    2.4K20

    Avalonia 后台代码简单播放动画示例

    本文将演示如何在 Avalonia 的后台代码里面创建 Animation 执行播放 本文演示的内容是将界面里面的一个 TextBlock 控件,通过修改控件的 RenderTransform 的 TranslateTransform...我认为这里是 Avalonia 的一个设计缺陷,应该在框架层做好转换类型逻辑 完成动画定义之后,现在动画还没附加在某个控件进行播放,咱就从用户控件里面获取刚才界面定义的控件,例子代码如下...; 拿到控件之后,使用 Animation 的 RunAsync 方法进行播放,这个方法可以不等待返回值。...只有在期望等待到动画播放结束的时候,才需要等待返回值的 Task 完成 在 Avalonia 里面存在一个设计缺陷是没有提供和 WPF 一样的故事板,如果有多个控件同时播放动画只好多次调用 RunAsync...请在命令行继续输入以下代码,将 gitee 源换成 github 源进行拉取代码。

    10910

    深入探讨前端UI框架

    2 理解前端框架 2.1 前端的工作 ?...scope的属性中,这个技术称为双向绑定 有一个关键的问题是,AngularJs如何实现监听scope的属性变更的呢?...一致,唯一不同的就是如何实现监听scope的属性变更 它们使用defineProperty的特性来监听scope的属性变更 这种方式和使用setter,getter来实现属性变更入口的框架比较类似 3.3...下面我们讨论一下为什么virtual DOM会比其他框架的UI更新(dirty check & setter)策略要快 首先,使用defineProperty自动检测变化或者setter类型的就不参与讨论了...循环扩展浏览器的原生事件循环,所有更新逻辑都是在js中执行完 react通过virtual DOM的diff得出改动,然后再统一的更新UI,这个过程也是一个js过程结束 两者都有同样的特征:通过大量的js计算完成所有的

    1.5K70
    领券