NativeScript + Angular2 - SegmentedBarバインディング

Question

このエラーは数時間にわたって発生しています。私がアプリを実行すると、IOSシミュレータは白いページしか表示せず、何もロードされていないようです。私は何が間違っているのか分からなかった。私は分割バーでページを作ってみたい。ここに私の 'menu.component.ts' ファイルのコードは次のとおりです。

import {Observable} from 'data/observable'; 
import {Component} from "@angular/core"; 

@Component({ 
    selector: "menu", 
    templateUrl: "./components/menu/menu.html", 
}) 

export class MenuComponent extends Observable { 
    public selectedItem: string; 
    public items: Array<any> = [ 
    { title: 'Home' }, 
    { title: 'G+' }, 
    { title: 'Sync' } 
    ]; 

    constructor() { 
    super(); 
    this.selectedItem = `Selected: ${this.items[0].title}`; 
} 

public selectSegment(e: any) { 
    this.set('selectedItem', `Selected: ${this.items[e.newIndex].title}`); 
    } 
} 

と私の 'menu.html' ファイル：

<SegmentedBar items="{{items}}" selectedIndexChanged="{{selectSegment}}" ></SegmentedBar> 
<Label text="{{selectedItem}}" ></Label> 

Answer 1

次のコードは、軽微な変更でhttp://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html からです。

全体として、nativeScript + Angular-2バインディングモデルではなく、NativeScriptコアバインディング構文を使用しています。

<SegmentedBar #tabs [items]="items" [selectedIndex]="selectSegment"></SegmentedBar> 

の詳細NativeScript +内のデータを結合角度-2 here

// #tabsは、（ID = "タブ" に等しい）コンポーネントのIDを提供するための方法である

ここで

は、（元のコードからいくつかのマイナーな変更）

import {Component, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef} from '@angular/core'; 

    import {Page} from 'ui/page'; 
    import {SegmentedBar, SegmentedBarItem, SelectedIndexChangedEventData} from 'ui/segmented-bar'; 

    @Component({ 
     selector: 'tabs', 
     template: '<SegmentedBar #tabs [items]="items" [selectedIndex]="selectedIndex"></SegmentedBar>' 
    }) 
    export class TabsComponent implements OnInit, OnDestroy, AfterViewInit { 
     selectedIndex: number; 
     items: Array<any>; 

     @ViewChild("tabs") tabs: ElementRef; // equal to getViewById() in NativeScript core 

     constructor(private page: Page) { 
      this.selectedIndex = 0; 
      this.items = [{ title: 'First' }, { title: 'Second' }, { title: 'Third' }]; 
     } 
     ngOnInit() { 

     } 
     ngAfterViewInit() { 
      this.tabs.nativeElement.on(SegmentedBar.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => { 
       switch (args.newIndex) { 
        case 0: 
         console.log('first selected') 
         break; 
        case 1: 
         console.log('second selected') 
         break; 
        case 2: 
         console.log('third selected') 
         break; 
       } 
      }) 
     } 
     ngOnDestroy() { } 
    }