[英]NativeScript + Angular2 - SegmentedBar binding
I've been experiencing this error for hours. 我已经经历了几个小时的错误。 When I run the app, the IOS simulator shows only a white page, nothing seems to be loaded.
当我运行该应用程序时,IOS模拟器仅显示白页,似乎未加载任何内容。 I couldn't figure out what's wrong.
我不知道怎么了。 I want to make a page with segmented bar.
我想制作一个带有分段栏的页面。 Here is my ' menu.component.ts ' file code:
这是我的“ 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}`);
}
}
and my ' menu.html ' file: 和我的“ menu.html ”文件:
<SegmentedBar items="{{items}}" selectedIndexChanged="{{selectSegment}}" ></SegmentedBar>
<Label text="{{selectedItem}}" ></Label>
The code below is from http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html with minor changes. 以下代码是从http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html进行的微小更改。
Overall you are using the NativeScript Core binding syntax instead of nativeScript+Angular-2 binding model which should look like this. 总的来说,您使用的是NativeScript Core绑定语法,而不是nativeScript + Angular-2绑定模型。
<SegmentedBar #tabs [items]="items" [selectedIndex]="selectSegment"></SegmentedBar>
More about data-binding in NativeScript+Angular-2 here 更多关于NativeScript +角2数据绑定在这里
// #tabs is the way to provide an Id for your component (equal to id="tabs") // #tabs是为您的组件提供ID的方式(等于id =“ tabs”)
Here is a working example from nativescriptsnacks.com (some minor changes from the original code) 这是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() { }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.