Hey there!
I'm trying to migrate my ng1 app to ng2.
I have this HTML structure, really simple
<div class="col-md-1 scroll-list" lazy-scroll-last>
<div class="list-group text-center">
<lazy-scroll-image-last></lazy-scroll-image-last>
</div>
</div>
For my lazy-scroll-last div I have this directive
@Directive({
selector : '[lazy-scroll-last]',
host : {
'(scroll)' : 'OnDivScroll()'
}
})
export class LazyLoadScrollComponent {
constructor(element: ElementRef) {
}
onInit() {
console.log('Scroll div initiated');
}
OnDivScroll() {
}
}
And for the lazy-scroll-image-last component I have this code (it prints
over 720 elements)
@Component({
selector : 'lazy-scroll-image-last',
viewInjector : [httpInjectables]
})
@View({
template : `
<a href="#/#img"
class="list-group-item menu-thumbnail"
*ng-for="#item of list_items; #i = index">
<img lazy-image [title]="item.image" />
h4>{{item.name}}</h4>
</a>
`,
directives: [NgFor, LazyImage] // LazyImage code skipped, not relevant
})
export class LazyLoadImageComponent {
constructor(element: ElementRef, http: Http) {
this.element = element;
this.http = http;
this.list_items = [];
this.tmp_list_items = [];
}
onInit() {
//console.log(this.http);
this.http.get('json/filejson.json')
.toRx()
.map(res => res.json())
.subscribe(tmp_items=> {this.tmp_list_items = tmp_items});
}
onCheck() {
console.log('Child onCheck');
if(typeof this.tmp_list_items !== 'undefined') {
let keys = Object.keys(this.tmp_list_items);
for(let i = 0; i < keys.length; i++) {
this.list_items.push({
name : this.tmp_list_items.items[keys[i]].name,
image : this.tmp_list_items.items[keys[i]].image
});
}
}
}
}
Everything works, but everytime I scroll the div, the children's onCheck is
called and that is making it extremely slow because of the logic I have
inside of it, Is that the expected behaviour?. When it is executed for the
first time, the onCheck is called three times (I don't understand why) but
it works. Then it loads the list (from the json, see onInit) with ng-for
and prints it.
What I expect is the component (child element) to repeat the elements so I
have my list, and then the parent div scroll over them and do some logic I
still can't do because of this.
As far as I know and I understood, from the documentation
<https://angular.io/docs/js/latest/api/annotations/OnCheck-interface.html> the
onCheck is called everytime the directive is being checked, but the
directive being checked is the parent's one, not the children's. Is my
approach wrong? (most likely).
I made this plunkr http://plnkr.co/edit/jDCu8H1qzG3Zqpc7VqRC?p=preview but
I get a white screen, but at least you can see the code.
Any advice? Am I missing something obvious?
Thanks in advance
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
