NativeScript + Angular2 - привязанный сегментный блок

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, которая должна выглядеть так.

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

Подробнее о данном связывании в NativeScript + угловому-2 here

// #tabs является способом обеспечить 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() { } 
    }