问题标签 [angular2-changedetection]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 角度2检查组件上的模型是否更改
首先,我的代码正在运行。这个问题是关于我是否在做正确的事情以及我是否正在使用 angular 2 的力量。我来自 angular 1,并且仍在学习 angular 2 核心概念。
开始吧:
给定一个 Angular 2 应用程序(RC.4),我有一个日历组件,它将日历呈现为视图。每个日历日都被“装饰”为红色(忙碌)或绿色(空闲),具体取决于 API 休息调用的结果。如果给定日期没有数据,则根本不会装饰这一天。
所以,我在日历的@component 中有以下 Observable。一旦它被解析,组件“条目”的属性就会被响应填充。(响应是属性“dayStatus”设置为忙/绿色的天对象数组)。
日历模板有一个解析为 decorateDay() 处理程序的 ngClass:
因此,每个“日”都以声明的方式查看是否应该通过处理程序 decorateDay(day) 将其装饰为绿色或红色。它的工作原理如下:“day”作为参数传递,并用作从 JSON 数组中检索相关对象的键。从对象属性中,字符串 green / red 被传递给视图,并由 CSS 使用 ngClass 进行修饰。
我的问题来了:我不知道什么时候会定义“条目”,所以如果未定义,我会检查处理程序。看起来当条目被填充时,组件再次神奇地重新检查处理程序(通过更改检测)。我对此表示满意,但是没有更好的方法来检查组件的属性何时发生更改?也许用@resolved 或使用生命周期钩子装饰属性..?我不喜欢我这样做的方式!
希望大家能给点指点。提前致谢!
PS:与模型属性的绑定可以在模板本身上完成,但我想使用一个处理程序,因为它让我在未来如何装饰给定的日子方面有更大的灵活性。
typescript - 销毁动态创建的组件会引发更改检测错误
我正在尝试销毁插入到模式窗口中的动态创建的组件。组件代码是
通过此服务显示模态窗口
该服务由父组件调用,父组件指定要使用的组件类型以及将输入和输出属性附加到组件引用(主体属性)的回调。
我遇到的问题是,当我尝试销毁动态创建的组件(FieldEditorComponent)时,出现错误
如您所见,我尝试清除 FieldEditor 中的订阅,并首先分离正在销毁的 ComponentRef 上可用的 ChangeDetectorRef。将 FieldEditor 的 ChangeDetectionStrategy 更改为 OnPush 也没有帮助。我还尝试了各种方式的 setTimeouts 来破坏组件、将引用设置为 null 以及删除模式的可见性。
modal 组件本身只是用来保存 html 并获取 modalBody ViewContainerRef,modalService 上的可见属性通过“display: none;”工作 而不是通过 *ngIf。
angular - 屏蔽Angular 2中的文本字段
我想在 Angular 2 中对电话号码、信用卡和 SSN 等字段应用屏蔽。我找不到任何解决方案。
当输入正确的位数时,应屏蔽字段,例如,如果用户输入 10 位数的电话号码。如果位数不合适,那么当用户点击模糊等字段时,应该会发生屏蔽。
如果有人可以为此分享解决方案,那就太好了。
谢谢。
javascript - Angular 2中流的更改检测?
在组件中读取流时,我无法分配变量。
基本上, this.filePath 从未分配过,我从未在视图中看到它。但是 console.log 总是有效的。
我是否使用某种更改检测(可能是 changedetectionref,因为它应该比 NgZone 快)?既然它是一个流,我们会立即获得所有这些吗?它是异步流吗?我应该调用 fs 模块上的属性来将数据写入变量吗?似乎 fs 模块上的管道功能旨在写入文件或其他流。
angularjs - 点击后Angular2不触发changeDetection
Angular2 不会触发ChangeDetection
单击事件后的事件。下面的代码片段用于将数据从一个组件获取到另一个组件。
点击事件
ApartmentOverview组件
公寓服务
公寓细节组件
在 HTML 文件中
我也尝试用事件发射器解决这个问题,但没有成功。只有以下脏修复有效:
angularjs - ng2 变更检测 - 什么可能导致“ApplicationRef_.prototype.tick()”被定期调用
我假设 @angular/core 中的“ApplicationRef_.prototype.tick()”需要在 Angular 2 RC4 中正确更新 DOM,(以及正确的早期版本)
在从 5 分钟快速入门示例 ( https://angular.io/guide/quickstart ) 创建的 angular 2 混合设置中,调用了此方法,但似乎最初只调用了有限次。
我在混合设置(ng1 和 ng2 使用 upgradeAdapter 一起工作)中并且仅在某些服务器中遇到更改检测问题。这使我深入研究变更检测。
我的问题是:什么会导致定期调用“ApplicationRef_.prototype.tick()”?似乎在我的组件工作的情况下,此方法是定期调用的,而不是像 5 分钟快速入门那样的有限时间。也许我需要强制这样做以确保它稳定运行。
抱歉,没有 plunker,因为我无法生成当前情况的简化版本
谢谢!
angular - Angular 2 等效于 Ember.Computed('Prop1','Prop2'...'prop n')
我正在尝试将我的 Ember 应用程序移植到 Angular 2 ,但我看不到如何
Computed Properties--Properties observing other properties for changes and the reacting
在 Angular 2 中创建。
观察它自身的变化和反应。
任何帮助/指示都会很棒。
更新 :
使用来自@Nazim Used typescript properties 的答案解决了它
TS(comment.ts)
模板 (component.html)
angular - 如何检测 Angular 中的 @Input() 值何时发生变化?
我有一个父组件 ( CategoryComponent )、一个子组件 ( videoListComponent ) 和一个 ApiService。
我的大部分工作都很好,即每个组件都可以访问 json api 并通过 observables 获取其相关数据。
目前视频列表组件只获取所有视频,我想将其过滤为特定类别中的视频,我通过将 categoryId 通过传递给孩子来实现@Input()
。
类别组件.html
这有效,当父 CategoryComponent 类别发生变化时,categoryId 值通过 via@Input()
但我需要在 VideoListComponent 中检测到这一点,并通过 APIService 重新请求视频数组(使用新的 categoryId)。
在 AngularJS 中,我会$watch
在变量上做一个。处理这个问题的最佳方法是什么?
typescript - angular2中注入服务属性的变化检测
Angular1老手在这里,努力学习angular2。我有一个带有状态服务的组件(MyState
如下),它被注入到自身及其子组件中。我想观察服务状态的变化,然后更新顶级组件中的另一个成员,如下所示:
我的问题是:我应该如何在 ListComponent 构造函数中实现伪代码?
当然,该addItemsString
成员是人为设计的,当然可以在模板本身中完成,但是为了我的问题,假设updateAddedItemsString
可以做很多更复杂的事情来更新ListComponent
.
提前致谢!
javascript - Angular 2:事件未触发
当我的组件从服务获取登录用户时,我试图触发一个事件,因为我只想在用户登录时显示导航栏。
这是我的 app.component 代码:
这是它的相关模板:
有人知道为什么我的事件没有被触发吗?
最初我认为问题是*ngIf
阻止触发事件的指令,但是即使删除它,事件也不会被触发......