NativeScript + Angular2 - SegmentierteBar-Bindung

Question

Ich habe diesen Fehler seit Stunden erlebt. Wenn ich die App starte, zeigt der IOS-Simulator nur eine weiße Seite an, nichts scheint geladen zu sein. Ich konnte nicht herausfinden, was falsch ist. Ich möchte eine Seite mit segmentiertem Balken erstellen. Hier ist meine 'menu.component.ts' Datei Code:

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}`); 
    } 
} 

und meine 'menu.html' file:

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

Answer 1

Der folgende Code ist aus http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html mit geringfügigen Änderungen .

Insgesamt verwenden Sie die Bindesyntax von NativeScript Core anstelle von nativeScript + Angular-2 Binding-Modell, die wie folgt aussehen sollte.

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

Mehr über Datenbindung in NativeScript + Angular-2 here

// #tabs ist der Weg, eine ID für die Komponente (gleich id = "tabs") zu liefern

Hier ist ein funktionierendes Beispiel von nativescriptsnacks.com (einigen kleineren Änderungen aus dem ursprünglichen Code)

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