4

angular2 ons-navigator ons-carouselを使ったページを作成していますが、以下の構成で実行すると*ngForが展開されません。

app.ts

@Component({
    selector: 'app',
    template: '<ons-navigator #myNavigator [page]="page"></ons-navigator>
})
export class MyApp implements OnInit {
    page = defaultPageComponent;
    constructor(private storeService: StoreService) {}
    ngOnInit() {
        this.storeService.init(); // Httpによるデータ取得 store初期化
    }
}

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) {}
}

デベロッパーツールで確認したところ、ngForの箇所でtemplate bindings = {}となっており、storeService初期化後のデータでレンダリングしてなさそうな感じです。storeService初期化のタイミングなんでしょうか。storeServiceの値が変わったタイミングでデータバインディングされない?
でも、この状態でブラウザをリロードするとngForが展開され、ons-carousel-itemが表示されます。デベロッパーツールで確認すると、template bindings=[Object object,Object object....]となっており、storeService初期化後のデータでデータバインディングできているようです。
初回からしっかり表示させる方法を教えていただければと思います。

試したことですが、app.ts内の

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

この中に直接defaultPageComponentのtemplate内容を書くと正常にデータバインディングができます。
この状態で作成しようと、ons-navigator初期ページはそのままapp.tsのtemplate内に書き、navigator.pushpage()によるページ遷移はons-templateを使い、id属性でページを指定する方法で進めたのですが、今度はons-navigator要素を取得後、pushPageで他のページを表示した時にコンソールに「そんなfactoryはありません。」とエラー、navigator.pushPage()で遷移するページだけコンポーネントにして、渡すそうとすると、angular2 onsenuiでは、ons-pageをコンポーネントのselectorに指定しなければならないようで、今度はapp.ts内に描かれているons-pageがうまく表示されません。

このons-navigator ons-carousel の構成でうまい方法はありませんか。

本当はdefaultPageComponentにMyAppから値を渡してデータバインディングがしたいのすが、onsen-ui angular2リファレンスの上記方法だと、defaultPageComponentへの値の渡し方がわかりません。@Inputも試しましたが、値が渡せません。
この値の渡し方も教えていただければと思います。

1
  • 自己解決しました。 原因は@NgModuleのentryComponents内で指定したコンポーネントであることが原因だったようです。 トップのons-navigatorコンポーネント初期化時に@ViewCild()で取得したnavigatorオブジェクトにてthis.navigator.nativeElement.pushPage(page)をngAfterViewInit内で呼ぶことでデータバインディングが正常にできました。尚、その際に、ChangeDetectorRefをDIして、changeDetectorRef.detectChanges()を呼ぶことで変更を許可するという記述を加えたところ問題なく動作しました。 相変わらず、初期化時に指定したページに@Inputで値を渡す方法はわかりませんが。
    – dismo
    Commented 2016年10月24日 6:48

1 件の回答 1

1

自己解決しました。

原因は@NgModuleのentryComponents内で指定したコンポーネントであることが原因だったようです。
トップのons-navigatorコンポーネント初期化時に@ViewCild()で取得したnavigatorオブジェクトにてthis.navigator.nativeElement.pushPage(page)をngAfterViewInit内で呼ぶことでデータバインディングが正常にできました。

尚、その際に、ChangeDetectorRefをDIして、changeDetectorRef.detectChanges()を呼ぶことで変更を許可するという記述を加えたところ問題なく動作しました。

相変わらず、初期化時に指定したページに@Inputで値を渡す方法はわかりませんが。


この回答は @dismo さんのコメント を元にコミュニティwikiとして投稿しました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。