JoshDSommer / nativescript-slides

A NativeScript plugin that is for Intro Tutorials, Image Carousels or any other slide functionality
Other
70 stars 32 forks source link

NullPointer exception when using Angular2 #18

Closed vjoao closed 8 years ago

vjoao commented 8 years ago

Maybe the on-load event is occurring before the slide map is built so the app crashes when using in on Angular:

    <SlideContainer>
        <Slide class="slide-1" *ngFor="let img of images">
            <Label [text]="img.title"></Label>
            <Image [src]="img.source"></Image>
        </Slide>
    </SlideContainer>

And I'm getting

TypeError: Cannot read property 'panel' of undefined
    at Object.callback (/data/data/org.nativescript.testapp/files/app/tns_modules/nativescript-slides/nativescript-slides.js:167:35)
    at SlideContainer.Observable.notify (/data/data/org.nativescript.testapp/files/app/tns_modules/data/observable/observable.js:155:23)
vjoao commented 8 years ago

Maybe this issue is more related with nativescript-angular itself. Gonna bother the guys there as well.

vjoao commented 8 years ago

Or maybe to use a {N} plugin with angular 2 you actually need to make it the 'Angular way'.

JoshDSommer commented 8 years ago

@vjoao and I figured out a way to call the constructView function in the ngAfterViewInit that will then allow usage of the slides in angular

vjoao commented 8 years ago

Ok, so the problem follows:

The SlideContainer constructor calls constructView() which sets a listener on the loaded event of it's superclass, the AbsoluteLayout. This listener callback tries to construct the slide map by iterating over it's children with eachLayoutChild() and it works on pure NativeScript.

Things get odd when using Angular 2 + NativeScript because the loaded event occurs before the children load, as the children are not Angular components, so Angular itself doesn't know when they are loaded... they just load. When the NG2-NS renderer renders the component, the loaded event is called with no children, thus crashing the loaded callback.

A possible solution was to modify the constructView() a bit, so it actually constructs the view and set the listeners outside this function. With that in mind, make the call to the constructView() function not on the loaded event from the raw NativeScript View, but on the ngAfterViewInit of your main component, so all the Views are actually loaded and the constructView() function can locate it's children.

This means refactoring. Perhaps no breaking changes are going to be introduced while solving this issue.

JoshDSommer commented 8 years ago

@vjoao thanks again for working through this with me. I'm closing this for now because of the 1.3.1 addition if you have any issues with it don't hesitate to open it.