更改每個選項卡的內容Angular 2

Question

我使用SegmentedBar作爲選項卡。而我menu.html文件看起來像這樣：

<StackLayout orientation="vertical" width="310" height="610"> 
    <nav> 
    <h1 class="title">Hello World</h1> 
    <SegmentedBar #tabs [items]="items" [selectedIndex]="selectedIndex" ></SegmentedBar> 
    </nav> 
</StackLayout> 

1. 的問題是，即使我修改它，似乎沒有對UI的情況發生。它只顯示標籤，就是它，即'Hello World'沒有出現在界面上。我想修改我的html，所以還有其他的操作會發生。爲什麼會發生？
2. 如何更改視圖，以便每個 選項卡都有不同視圖？

這裏是我的menu.component.ts文件：

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', 
    templateUrl:"./components/menu/menu.html" 
}) 

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: 'Home' }, { title: 'G+' }, { title: 'Sync' }]; 
    } 
    ngOnInit() { 

    } 

    ngAfterViewInit() { 
     this.tabs.nativeElement.on(SegmentedBar.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => { 
      switch (args.newIndex) { 
       case 0: 
        console.log('Home selected') 
        break; 
       case 1: 
        console.log('G+ selected') 
        break; 
       case 3: 
        console.log('Sync selected') 
        break; 
      } 
     }) 
    } 
    ngOnDestroy() { } 
} 

Answer 1

不能使用DOM在NativeScript這意味着你不能使用像H1瀏覽器特定的標籤，UL，李格等等。如果你想要自己的標籤，你可以用integrating third-party components來實現。

分段條與TabView不同 - 它不會爲您提供內容空間，但只能使用分段條。你應該做的是使用selectedIndex根據它來修改你的頁面。

這是一個非常簡單的實現，關於如何根據用戶選擇來更改內容（僅用於演示 - 有很多更好的解決方案，例如使用部分視圖（也稱爲自定義組件）和聲明布爾變量可見性改變）

app.component.html

<StackLayout orientation="vertical" width="310" height="610"> 
    <SegmentedBar #tabs [items]="items" [selectedIndex]="selectedIndex" ></SegmentedBar> 

    <GridLayout #firstTabContent width="300" height="500" backgroundColor="orange" fontSize="40"> 
     <Label text="FIRST" textWrap="true"></Label> 
    </GridLayout> 

    <GridLayout #secondTabContent width="300" height="500" backgroundColor="red" fontSize="40"> 
     <Label text="SECOND" textWrap="true"></Label> 
    </GridLayout> 

    <GridLayout #thirdTabContent width="300" height="500" backgroundColor="green" fontSize="40"> 
     <Label text="THIRD" textWrap="true"></Label> 
    </GridLayout> 

</StackLayout> 

app.component.ts

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', 
    templateUrl: 'app.component.html' 
}) 
export class TabsComponent implements OnInit, OnDestroy, AfterViewInit { 
    selectedIndex: number; 
    items: Array<any>; 

    messages: Array<any>; 

    @ViewChild("tabs") tabs: ElementRef; 

    @ViewChild("firstTabContent") firstTabContent: ElementRef; 
    @ViewChild("secondTabContent") secondTabContent: ElementRef; 
    @ViewChild("thirdTabContent") thirdTabContent: ElementRef; 

    constructor(private page: Page) { 
     this.selectedIndex = 0; 
     this.items = [{ title: 'First' }, { title: 'Second'}, { title: 'Third'}]; 
    } 

    ngOnInit() { 
     // the initial load setup 
     this.firstTabContent.nativeElement.visibility = "visible"; 
     this.secondTabContent.nativeElement.visibility = "collapsed"; 
     this.thirdTabContent.nativeElement.visibility = "collapsed"; 
    } 

    ngAfterViewInit() { 
     this.tabs.nativeElement.on(SegmentedBar.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => { 
      switch (args.newIndex) { 
       case 0: 
        console.log('first selected'); 

        this.firstTabContent.nativeElement.visibility = "visible"; 
        this.secondTabContent.nativeElement.visibility = "collapsed"; 
        this.thirdTabContent.nativeElement.visibility = "collapsed"; 
        break; 
       case 1: 
        console.log('second selected') 

        this.firstTabContent.nativeElement.visibility = "collapsed"; 
        this.secondTabContent.nativeElement.visibility = "visible"; 
        this.thirdTabContent.nativeElement.visibility = "collapsed"; 
        break; 
       case 2: 
        console.log('third selected') 

        this.firstTabContent.nativeElement.visibility = "collapsed"; 
        this.secondTabContent.nativeElement.visibility = "collapsed"; 
        this.thirdTabContent.nativeElement.visibility = "visible"; 
        break; 
      } 
     }) 
    } 

    ngOnDestroy() { } 
}