angular2ons-navigator

Asked 1 years ago, Updated 1 years ago, 77 views

I am creating a page with angular2ons-navigatorons-carousel, but *ngFor will not be expanded if I run it in the following configuration:

app.ts

@Component({
    selector: 'app',
    template: '<ons-navigator#myNavigator[page]="page"></ons-navigator>
})
export class MyApplications OnInit {
    page=defaultPageComponent;
    constructor(private storeService:StoreService){}
    ngOnInit(){
        This.storeService.init(); // Http data retrieval store initialization
    }
}

defaultPageComponent.ts

@Component({
    selector: 'ons-page',
    template:`
        <ons-carousel>
            <ons-carousel-item*ngFor="let item of storeService.data">
                <div>{{item}}</div>
            </ons-carousel-item>
        </ons-carousel>
    `
})
export class DefaultPageComponent {
    constructor(private storeService:StoreService){}
}

I checked with the developer tool and found that template bindings={} in the ngFor area, and it seems that the data after storeService initialization has not been rendered.Is it the timing of storeService initialization?Does the data bind when the storeService value changes?
However, reloading the browser in this state expands ngFor and displays ons-carousel-item.According to the developer tool, template bindings = [Object object, Object object...] appears to be able to bind data with data after storeService initialization.
Please tell me how to display it properly from the beginning.

I have tried it, but it is

in app>
template: '<ons-navigator></ons-navigator>'

If you write the template contents of the defaultPageComponent directly, you can successfully bind the data.
In order to create this state, the initial page of ons-navigator is written directly in the template of app.ts, and the page transition by navigator.pushpage() is carried out using ons-template and the id attribute specifies the page.

Is there a good way to configure this ons-navigator ons-carousel?

I really want to pass the value from MyApp to the defaultPageComponent and bind the data, but I don't know how to pass the value to the defaultPageComponent using the above method in the onsen-uiangular2 reference. I also tried @Input, but I can't.
Please also tell me how to give this value.

onsen-ui angular2

2022-09-30 14:53

1 Answers

Self-resolved.

The reason seems to have been the component specified in entryComponents of @NgModule.
Data binding was successful by calling this.navigator.nativeElement.pushPage(page) within ngAfterViewInit in the navigator object retrieved by @ViewCild() when the top ons-navigator component was initialized.

At that time, I added a statement that DI ChangeDetectorRef and call changeDetectorRef.detectChanges() to allow changes, and it worked fine.

As always, I don't know how to pass the value in @Input to the page you specified during initialization.

This response was posted as a community wiki based on @dismo's comment.


2022-09-30 14:53

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.