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

angular 8在onchanges事件中修改了一个变量,但当我想要访问它时,我发现它没有改变

在Angular 8中,当你在ngOnChanges事件中修改一个变量时,可能会遇到变量在访问时没有改变的情况。这是因为ngOnChanges事件是在组件的输入属性发生变化时触发的,而Angular的变更检测机制可能会导致变量的改变不立即生效。

解决这个问题的方法是使用ngAfterContentCheckedngAfterViewChecked生命周期钩子来确保变量的改变已经生效。这两个钩子会在变更检测周期的最后阶段触发,确保所有变更都已经应用到视图中。

另外,还可以考虑使用ChangeDetectorRef来手动触发变更检测,以确保变量的改变立即生效。在组件中注入ChangeDetectorRef,然后在ngOnChanges事件中调用detectChanges方法。

以下是一个示例代码:

代码语言:txt
复制
import { Component, Input, OnChanges, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ myVariable }}</div>
  `
})
export class ExampleComponent implements OnChanges {
  @Input() inputVariable: any;
  myVariable: any;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges() {
    // 修改变量
    this.myVariable = '新的值';

    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

这样,当ngOnChanges事件触发时,变量的改变会立即生效,并且在视图中正确显示。

关于Angular 8的更多信息,你可以参考腾讯云的Angular产品介绍页面:Angular - 腾讯云

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

相关·内容

AngularDart 4.0 高级-生命周期钩子 顶

组件有一个Angular自己管理的生命周期。 Angular创建,渲染,创建和渲染的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM删除之前对其进行销毁。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下的name属性)构造没有分配的值。...添加一个英雄会产生一个新的英雄。 间谍的ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM移除所有英雄元素并同时销毁他们的间谍指令。...ngOnChanges并没有捕捉到hero.name的变化,这一开始令人惊讶。 当输入属性的值改变Angular只会调用钩子。 hero属性的值是对hero对象的引用。...Angular并不在意英雄自己的name属性发生了变化。 英雄对象引用没有改变,所以从Angular的角度来看,没有改变的反馈!

6.1K10

详解ANGULAR2组件的变化检测机制(对比ANGULAR1的脏检测)

'; } } 当你点击 '改变Text属性' 的按钮发现页面 p 元素的内容会从 'Semlinker' 更新为 'Text属性已改变' ,控制台却没有输出任何信息,这验证了我们刚才给出的结论...变化检测策略 Angular 2 我们可以定义组件的 metadata 信息,设定每个组件的变化检测策略。...如果 ProfileCardComponent 的 profile 输入属性没有发生变化,是没有必要再执行变化检测。针对这种情况,Angular 2 为我们提供了 OnPush 的检测策略。...AppComponent 组件 profile 对象的 name 属性已经被改变了,页面名字的内容却未同步刷新。...person 对象前,我们先把 person 对象赋值给 aliasPerson 变量修改完 person 对象的属性之后,我们使用 === 比较 aliasPerson 与 person,发现输出的结果是

2.9K90

Angular快速学习笔记(3) -- 组件与模板

angular提供两种地方存放组件模板 你可以使用 template 属性把定义为内联的, 或者把模板定义一个独立的 HTML 文件, 再通过 @Component 装饰器的 templateUrl...并把设置为组件的 isUnchanged 属性的当前值,你的直觉是错的!isUnchanged为true,button增加disabled属性。...方括号的部分不是元素的属性名,而是由attr前缀,一个点 (.) 和 attribute 的名字组成。...Angular 管道对像这样的小型转换来说是个明智的选择。 管道是一个简单的函数,接受一个输入值,并返回转换结果。 它们很容易用于模板表达式,只要使用管道操作符 (|) 就行了。...子组件暴露一个 EventEmitter 属性,当事件发生,子组件利用该属性 emits(向上弹射)事件

15.2K30

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

,有时候无法直接知道父组件的类型,Angular,可通过类—接口(Class-Interface)的方式来查找,即让父组件通过提供一个与类—接口标识同名的别名来协助查找。...} } 父组件监听子组件的事件 子组件暴露一个 EventEmitter 属性,当事件发生,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生作出回应。...($event)的$event是固定写法,框架(Angular)把事件参数(用 $event 表示)传给事件处理方法)。...但是它也有局限性,因为父组件-子组件的连接必须全部父组件的模板中进行。父组件本身的代码对子组件没有访问权。 如果父组件的类需要读取子组件的属性值或调用子组件的方法,就不能使用本地变量方法。...} 通过服务传递 Angular的服务可以模块注入或者组件注入(均通过providers注入)。 模块中注入的服务整个Angular应用都可以访问(除惰性加载的模块)。

3.3K80

Angular Input和Output

实际应用场合,我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成,当应用启动Angular 会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。...((value: number) => console.log(value)); numberEmitter.emit(10); Angular 的 EventEmitter 应用场景是: 子指令创建一个...通过上面的实例,我们知道我们可以 AppComponent 父组件监听 CounterComponent 子组件的 change 事件,然后 change 事件更新 initialCount 的值...当 Angular 解析模板,遇到 [(modelName)] 形式的绑定语法,它会期待这个指令中会存在一个名为 modelName 的输入属性和一个名为 modelNameChange 的输出属性...ngModel 使用过 Angular 1.x 的读者,应该很熟悉 ng-model 这个指令,我们通过来实现数据的双向绑定。那么 Angular 中有对应的指令么 ?

2.3K50

Angular 的生命周期

这是参与「掘金日新计划 · 4 月更文挑战」的第16天, 接触过 react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们使用 angular 开发的过程,是避免不了的。...组件从开始建立到销毁的过程,会经历过一系列的阶段。这就是一个生命周期,这些阶段对应着应用提供的 lifecycle hooks。 那么, angular ,这些 hooks 都有哪些呢?...ngOnChanges 当我们有外部参数更改的时候,我们就会执行 ngOnChanges,也就是说组件中有 @Input 所绑定的属性值发生改变的时候调用。...怎么没有打印 ngOnChanges 的钩子函数信息呢? 上面已经说过了,需要触发条件 @Input 的属性值改变的时候。我们来修改一下: <!...this.showDemoComponent = false } // demo.component.ts ngOnDestroy() { console.log('9. demo ngOnDestroy') } PS: 不知道读者有没有发现

85720

国庆节前端技术栈充实计划(8):使用 AngularJS 和 ReactJS 的经验

React 解决了我们团队开发编写可维护代码的诉求。 ? 2. React + Flux = ♥ 沿着这条路走下去,我们发现并不是一切都很美好。...当我开始写第一行 Angular 代码的时候,就真心诅咒。这就是所谓的:如果你爱 React,那你就恨 Angular不能自欺欺人,一开始,Angular 代码一点也不开心。...当我表单遇到一个由于 ngIf directive 创建一个新的子域而导致的问题,我处理起来还是很费劲。...还有当我想要一个准备发送给服务器的 JSON 移除一些空白字段发现 UI 对应的数据也被一并移除了 —— 丫的双向绑定 ╮(╯▽╰)╭。...还有当我想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块一瞬间,两者同时显示了。

1.4K30

Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

官方建议使用$watch方法来追踪scope变量,而当我们这样做,会发现$watch函数仅能追踪到那些通过修改controller的数据模型而影响link函数变量的行为并更新视图。...其基本过程是这样的,每当我们使用ng-model或ng-bind指令将数据模型的某个变量值和html页面上某个标签的内容联系起来时,Angular就会把这些变量放进一个WatchCollection的集合...每当WatchCollection中有变量出现变动Angular就会遍历WatchCollection来查看是否有其他监控变量也被影响,每当有一个变量被影响,Angular都会在遍历后再进行一次遍历...我们可以回顾一下上面使用双向数据绑定发生异常的场景: 使用了原生的定时器(Angular你应该使用$interval,$timeout服务) 用类原生方法(bind)为元素添加事件监听器,并在回调函数改了变量的值...你会发现,每当自己没有按照Angular的方式去编写代码,或者没有按照一个模块设计的初衷去使用它,就无法确切地得到期望的结果。

3.4K20

解读移动端的跨平台开发:TypeScript + Angular

除了进行基本类型的检测之外,还能帮我们做一些重构。 当一个变量的类型改变了之后,很有可能在项目里其它地方也需要改动。的tsc的compiler可以帮助我们修改,不用手动去改每个地方。...虽然TypeScript希望大家尽量每个地方都能标注的类型,其实这个类型是可选的。原因有两个,其中一个原因就是当我们需要和很多其它第三方程序库进行整合的时候,我们并不能保证它有这个型别的定义。...Google内部,当一个工程师改了一行Angular代码的时候有成千上万的单元测试都会被运行。我们希望平台是一个稳定的平台,新出的版本不会破坏以前现有产品的开发。...Angular里面有一个非同步执行的context,复写了所有非同步的函数和事件,当每次结束的时候都需要在每个组件里做一个变化的检测。...每一个元素都会最终成为一个原生的元素。要注意的是,它所有的语法和Angular是一样的,所以渲染的过程不会有任何问题。

3.1K80

Angular2学习记录-给后端程序员的经验分享

使用TypeScript作为开发语言,对于Java和C#程序员可以快速上手,还有就是比较喜欢强类型语言,每个变量各司其职,由其的类型来限定,开发人员也很明确知道变量的作用. google和Microsoft...,self并不受angular管理,导致刷新的变量是self的isBackColor. 3.2http参数传递 按照下面代码传参数应该是没有问题的,但是遇到了url被编码问题,例如输入`1111@qq.com...会被转换为1111%40qq.com,导致服务端解析失败,找了很多原因才发现是URLSearchParams这个对象用错了,angular2提供了这个对象,es6里面也有一个该对象,换成ng2对象即可.../,则先在根路由寻找,找到其跳转到IndexComponent,完成任务 访问/aust.则先在根路由找,发现需要到子路由里面寻找,到子路由后,children中发现被重定向到/index,那么回到根路由...很简单在根module中提供服务且其他组件不要自己providers该服务. 3.7组件生命周期 组件生命周期看下面这张图.图中没有onChanges(changes: SimpleChanges)方法的调用

3.1K20

实战 | Change Detection And Batch Update

当我们连续更新数据,这些框架/库如何避免连续更新DOM,而是进行批量更新? 带着这两个问题,将简要分析一下React、Angular1、Angular2及Vue的实现机制。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用的方法连续setState走的是批量更新,此外走的是连续更新。...综上,说setState是异步的需要加一个前提条件,React调用的方法执行,这时我们需要通过回调获取到最新的state 相信这个道理大家不难理解,因为事件和生命周期方法都是React调用的,它想怎么玩就怎么玩...由于事件系统用的Vue提供的,是可控的,我们再看下定时器下执行的情况: 打开控制台,点击按钮会发现依旧打印了0 0,有人可能就疑惑了Vue是不是跟Angular2一样也修改了异步方法的原生实现呢?...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.2K20

多种前端框架的优缺点「建议收藏」

有一次为了升级到jQuery 1.3,不得不自己动手修改了一个第三方插件。...3、多个插件冲突:同一页面上使用多个插件,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector最为明显。...缺点: 1.angular 入门很容易 深入后概念很多, 学习较难理解. 2.文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问...,需要写很多模板标签 8.ngView只能有一个,不能嵌套多个视图,虽然有angular-ui/ui-router 解决,ui-router 对于URL的控制不是很灵活,必须是嵌套式的 9.这次从...状态 Vue的数据是可变的(mutated),改变数据,页面就会重新渲染更新。(Vue改变状态的操作不仅更加简洁,而且的重新渲染系统实际上比React的更快更高效。)

3.6K20

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

应该使用Angular吗? 这取决于有些开发人员会告诉你最好使用React并在没有额外代码的情况下构建自己的组件。这也可能是一个问题。...每次我们改变我们的代码Angular CLI都会重新编译,如果需要的话重新注入,并要求我们的浏览器页面打开重新加载页面。...banana,或者ngModel是一个Angular指令,负责从事件和所有那些获取价值。...为了收听DOM事件Angular为我们提供了HostListener装饰器。它是一个函数装饰器,接受我们想要监听的本地事件的名称,以及Angular想要调用的函数来响应。...哈希#form是一个模板引用变量,我们可以用它来访问我们的代码的表单。

42.5K10

Angular2 之 Animations

使用要点 Angular2的动画是使用模型驱动的方式两个状态之间进行转换,是由状态和状态之间的转场效果所定义的。 动画被定义@Component元数据。...需要定义一个动画触发器(triggerName),模板中使用[@triggerName]语法来把附加到一个或多个元素上去。 triggerName设置成表达式,不同的状态,来定义动画状态。...当定义那些不需要管当前处于什么状态的样式及转场,这很有用。 void状态 有一种叫做void的特殊状态,它可以应用在任何动画中。表示元素没有被附加到视图。...可以用三种方式定义持续时间: 作为一个普通数字,以毫秒为单位,如:100 作为一个字符串,以毫秒为单位,如:'100ms' 作为一个字符串,以秒为单位,如:'0.1s' 延迟 延迟控制的是动画已经触发尚未真正开始转场之前要等待多久...·函数意味着动画开始相对缓慢,然后进行逐步加速。可以通过在这个字符串的持续时间和延迟后面添加第三个值来控制使用哪个缓动函数(如果没有定义延迟就作为第二个值)。

1.9K10

2032 年了,面试官居然还在问三大框架响应式的区别……

当我说“可观察”并不是指像 RxJS 这样的 Observables。指的是可观察这个词的常见用法,即知道何时发生变化。而“非可观察”意味着没有办法知道值具体的时间点上发生了变化。...、封闭变量,或者是属性。...关键是只是一个非可观察的值,以一种不允许框架在值发生变化时知道(观察)的方式存储 JavaScript 。...开始需要稍微更多的规则(更多知识)⇒ 之后无需优化。 基于值的系统,性能问题是逐渐累积的。没有一个特定的改变会导致应用程序出现问题,只是“有一天变得太慢了”。...一旦想要进行优化,就没有“明显”的问题可解决。 相反,这是多年来积累的债务的一个漫长而缓慢的消减过程。此外,“优化”API 引入了风险,可能会导致你掉入响应式的陷阱(更新停止传播)。

28530

更换一次 UI 组件库才知道的事

三: 限制条件的变化 (可能是bug) InputNumber 数字输入框限制条件变了, 比如设置最小值为 1, 当我输入0的时候输入框会默认把值转为1, 但是新版输入框竟然输入0的时候没有把值转为...十: 组件标签嵌套的改变 比如说弹出框组件, 原本弹出框组件有两层div包裹, 当我想要获取最外层的div就需要当前元素.parentNode?....十一: 组件未做国际化 这个问题比较直观了, 当我们修改用户的语言, 组件未根据我们选择的语言进行语言的变化, 这种功能发现之后让对应同学加一下就好了。...十三: 样式变量改变 比如旧组件库里面定义红色分为red-01, red-02, red-03几种类型的class名或者css变量, 分别表示深与浅的红色, 项目代码也同样引入了旧组件库提供的这些变量...这种情况要不就找对应同学一下, 要不就每个操作都主动加一个销毁当前弹框的操作。

2.6K20

Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?

以下是的个人理解,仅供参考: 还是 jQuery 的时代,当在 js 改变了某个变量的数据,而这个变量是需要在 Html 显示出来的。...vue 要求得声明 data 变量,当变化时才会被追踪到,以更新视图 为什么这些框架会有这些要求,或者说这些规定? 因为需要知道我们到底什么时刻会去对数据进行更新啊。...对于 react 来说,当我们需要更新变量的数据值,都通过调用它的方法,那么,自然就知道我们什么时候更新了数据了。...对于 vue 来说,虽然我们更新数据是直接对变量进行赋值操作,实际上,声明 data 的这些变量,都会被转换成存取器属性,也就是 set 和 get。...好像使用 Angular 过程,并没有需要遵循什么规定。 这是因为,Angular 的实现原理并不类似于 react 和 vue。

1.7K10

脏值检测(代表:angular1)前面说

单向数据的小例子,首先我们on里面加入事件a,回调是a.innerHTML = str,然后我们可以改变model层的时候,顺便触发一下(emit(‘a’)),不就可以做到M->V的反映了吗?...而我们前面的vue,当我控制台改了数据,就可以马上反映到v层。angular没有这个操作,也没有意义。...angular1,私有变量以$$开头,$$watch是一个存放很多个绑定的对象的数组,用$watch方法来添加的,每一个被绑定的对象属性是:变量名、变量旧值、一个函数(用来返回变量新值)、检测变化的回调函数...作用域上添加数据本身不会有性能问题。如果没有监听器监控某个属性,它在不在作用域上都无所谓。$digest并不会遍历作用域的属性,遍历的是监听器。一旦将数据绑定到UI上,就会添加一个监听器。...比如我们假设有一个这样的生命周期:1.从data里面读取数据2.ui行为(如果没有ui行为就停在这里等他有了为止)3.触发data更新4.再回到步骤1 改了一个数,v层不能反回头来找他来更新v层视图(从步骤

1.6K40

Change Detection And Batch Update

当我们连续更新数据,这些框架/库如何避免连续更新DOM,而是进行批量更新? 带着这两个问题,将简要分析一下React、Angular1、Angular2及Vue的实现机制。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用的方法连续setState走的是批量更新,此外走的是连续更新。...新手常碰到的一个问题就是为啥下面的代码不起作用 $('#btn').on('click', function() { $scope.val = 1; }); 因为我们没有Angular1提供的事件系统...如果我们不使用Angular1提供的事件系统、定时器和$http,如在jQuery事件中进行数据更新,我们需要手动调用$apply。 Angular2 ?...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.3K40
领券