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>

问题是即使我修改它，UI上似乎没有任何事情发生。它只显示标签，即“Hello World＆＃39;没有出现在界面上。我想修改我的html，所以还会有其他动作。为什么会这样？
如何更改视图，以便每个视图都有不同的视图标签？

这是我的 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

你不能在NativeScript中使用DOM意味着你不能使用浏览器特定的标签，如h1，ul，li，div等。如果你想要自己的标签你可以用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() { }
}

更改每个选项卡Angular 2的内容

1 个答案: