天道酬勤,学无止境

angular2-changedetection

Angular2 template expression called twice for each component on change-detection

Pretty standard situation. There is one parent component <item-list>. Inside its template with *ngFor generated 20 child components <item-block>. Child component styles set with [ngStyle] directive and template expression that calls function setStyles(). The problem (or maybe not) is that when any event emitted on one specific child element, expression setStyles() executed twice for each of child components. So if we click on one specific item in our example, and we have 20 <item-block> components - setStyles() will be executed 20+20 times. The questions are: Why its happening and is it

2022-01-16 17:46:52    分类:问答    angular   angular2-template   angular2-components   angular2-changedetection

为什么 changeDetectionStrategy.OnPush 在@Input 属性更改中不更新,但更新@Output 触发属性更改?(Why changeDetectionStrategy.OnPush does not update in @Input attribute change but does update @Output trigger attribute change?)

问题 考虑一下这个笨蛋 Grandchild Component <button (click)="back2click()"></button> @Input() from2; @Output() back2 = new EventEmitter<any>(); back2click() { this.back2.emit('hi'); } Child Component changeDetection: ChangeDetectionStrategy.OnPush, <my-app-n2 [from2]="from1" (back2)="handleback2($event)"></my-app-n2> @Input() from1; @Output() back1 = new EventEmitter<any>(); handleback2() { this.back1.emit('hi') } Parent Component <my-app-n1 [from1]="from" (back1)="handleback1($event)"></my-app-n1> handleback1 () { this.from.name = 'handline4'; } 我看到当button被点击时 back2click -> emit -> handleback2 -> emit -

2022-01-15 02:53:33    分类:技术分享    javascript   angular   typescript   angular2-changedetection

Angular2:可观察到的变化检测(Angular2: Change detection inside observable)

问题 只是我用 Angular2 RC3(使用 Angular-CLI)尝试了我的第一个应用程序,但我迷失了这个...... 我对变量word “更改检测”有word 。 我在 Observable 的subscribe方法中更新了word变量,但没有检测到任何变化。 app.component.ts import { Component, Inject, OnInit } from '@angular/core'; import { VoiceRecognitionService } from './voice-recognition.service'; @Component({ moduleId: module.id, selector: 'app-root', template: `<h1>{{word}}</h1>`, // => No prints any update providers: [VoiceRecognitionService], styleUrls: ['app.component.css'] }) export class AppComponent implements OnInit { private voice: VoiceRecognitionService; public word: string = ''; constructor(

2022-01-14 02:03:51    分类:技术分享    javascript   typescript   angular   angular-cli   angular2-changedetection

使用共享服务在 angular2 中进行更改检测(change detection in angular2 using shared service)

问题 我有一个父函数ngOnInit()从谷歌地图获取值如下 instance.input = document.getElementById('google_places_ac'); autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']}); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name); }); setValue()是与共享服务共享价值的函数,在 html 页面上,我与父子<input id="google_places_ac" [(attr.state)]="state" [(attr.country)]="coutnry" name="google_places_ac" type="text" value="{

2022-01-13 19:11:44    分类:技术分享    angular   angular2-changedetection

change detection in angular2 using shared service

i am having a parent function ngOnInit() which gets the value from google maps as follow instance.input = document.getElementById('google_places_ac'); autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']}); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name); }); setValue() is function which shares value with shared service and on html page i have same thing as

2022-01-12 11:44:14    分类:问答    angular   angular2-changedetection

Why changeDetectionStrategy.OnPush does not update in @Input attribute change but does update @Output trigger attribute change?

Consider this plunker Grandchild Component <button (click)="back2click()"></button> @Input() from2; @Output() back2 = new EventEmitter<any>(); back2click() { this.back2.emit('hi'); } Child Component changeDetection: ChangeDetectionStrategy.OnPush, <my-app-n2 [from2]="from1" (back2)="handleback2($event)"></my-app-n2> @Input() from1; @Output() back1 = new EventEmitter<any>(); handleback2() { this.back1.emit('hi') } Parent Component <my-app-n1 [from1]="from" (back1)="handleback1($event)"></my-app-n1> handleback1 () { this.from.name = 'handline4'; } I see that when button is clicked back2click ->

2022-01-10 22:03:28    分类:问答    javascript   angular   typescript   angular2-changedetection

Angular2: Change detection inside observable

Just I tried my first app with Angular2 RC3 (Using Angular-CLI) and I'm lost with this... I have a problem with "Change detection" of variable word. I update the word variable inside the subscribe method of Observable, but no changes detected. app.component.ts import { Component, Inject, OnInit } from '@angular/core'; import { VoiceRecognitionService } from './voice-recognition.service'; @Component({ moduleId: module.id, selector: 'app-root', template: `<h1>{{word}}</h1>`, // => No prints any update providers: [VoiceRecognitionService], styleUrls: ['app.component.css'] }) export class

2022-01-10 13:28:25    分类:问答    javascript   typescript   angular   angular-cli   angular2-changedetection

如何对 div 调整大小执行更改检测(How to perform change detection on div resizing)

问题 我将 Bootstrap 用于我的布局,我需要检查我的div与 bootstrap 的自动计算大小是否发生了变化,例如 width = 25%。 如何对我没有在模板中设置但由 Bootstrap 设置的属性执行更改检测? (window:resize)是不够的。 回答1 您可以向div添加指令并实现生命周期钩子ngDoCheck()以执行您自己的更改检测逻辑。 您需要注入ElementRef : constructor(private _elRef:ElementRef) {} ngDoCheck() { // use ElementRef to examine the div property of interest 如果div在组件模板内,则添加本地模板变量 <div #myDiv ...> 然后使用@ViewChild()获取对div的引用并实现生命周期钩子ngDoCheck()或ngAfterViewChecked()以执行您自己的更改检测逻辑。 @ViewChild('myDiv') theDiv:ElementRef; ngAfterViewChecked() { // use this.theDiv to examine the div property of interest 请注意,每次更改检测运行时都会调用 ngDoCheck() 和

2022-01-07 22:36:50    分类:技术分享    resize   angular   angular2-changedetection

How to perform change detection on div resizing

I use Bootstrap for my layout and I need to check if the automatic calculated size of my div with bootstrap for example width = 25% is changed. How to perform change detection on a attribute which I don't set in my template, but is set by Bootstrap? (window:resize) is not enough.

2022-01-07 21:55:27    分类:问答    resize   angular   angular2-changedetection

角度:未检测到管道变化(Angular: Change in Pipe not detected)

问题 我有这个管道,它将输入值乘以从服务中检索到的另一个值: @Pipe({ name: 'multiply' }) export class MultiplyPipe implements PipeTransform { constructor(private service: StateService) { } transform(value: any, args?: any): any { return value * this.service.multiplier; } } 用法: {{ value | multiply }} 演示 这工作正常,但是当服务的multiply值发生变化时,它不会触发任何变化检测,因此 {{ value | multiply }} 不再运行,在屏幕上留下旧值。 有什么建议可以解决这个问题吗? 回答1 正如 Angular 文档中所讨论的,以及在此 stackblitz 中所示,强制调用管道的一种方法是使其不纯: @Pipe({ name: 'multiply', pure: false }) 有关纯管道和不纯管道的更多详细信息,您可以查看这篇文章。 回答2 我认为问题在于,虽然组件在访问StateService接收事件,但管道不会。 要解决此问题,请改为将MultiplyPipe更改为采用multiplier参数

2021-12-22 23:29:40    分类:技术分享    angular   angular2-changedetection