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