Ändern Sie den Inhalt für jede Registerkarte Angular 2

Question

Ich verwende SegmentedBar für Tabs. Und meine menu.html Datei sieht wie folgt aus:

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

1. Das Problem selbst ist, wenn ich es ändern, nichts scheint auf UI passieren. Es zeigt nur die Tabs, das ist es, d. H. "Hello World" erscheint nicht auf der Oberfläche. Ich möchte meinen HTML ändern, also werden andere Aktionen passieren. Warum passiert das?
2. Wie kann ich Ansichten ändern, so dass für jede Registerkarte verschiedene Ansichten angezeigt werden?

Und hier ist meine menu.component.ts Datei:

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

Sie können nicht DOM in NativeScript verwenden bedeutet, dass Sie nicht Browser-spezifische Tags wie h1 verwenden können, ul, li, div , etc .. Wenn Sie Ihre eigenen Tags wollen, können Sie das mit integrating third-party components erreichen.

Die segmentierte Leiste unterscheidet sich von der TabView - sie enthält keinen Inhaltsbereich, sondern nur einen segmentierten Balken. Was Sie tun sollten, ist die selectedIndex verwenden, um Ihre Seite abhängig davon zu ändern.

Hier ist eine sehr einfache Implementierung, wie man den Inhalt basierend auf der Benutzerauswahl ändert (es ist nur zur Demonstration - es gibt viele viel bessere Lösungen. Zum Beispiel verwenden Teilansichten aka benutzerdefinierte Komponenten und deklarieren eine boolesche Variable für die Sichtbarkeitsveränderung)

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