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核心綁定語法而不是nativeScript + Angular-2綁定模型，它應該看起來像這樣。在NativeScript +

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

更多關於數據綁定角-2 here

// #tabs是提供一種用於您的組件的ID（等於ID = 「選項卡」）的方式

下面是nativescriptsnacks.com（從原來的代碼稍作更改）

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