Nativescript + Angular Segmentedバーは他のコンポーネントにルーティングできませんか？

Question

異なるコンポーネントにある2種類のフォームを視覚化するためにSegmentedBarを使用しようとしていますが、コンポーネントにルーティングされた部品を削除して、バー自体が視覚化されますが、視覚化せず、ただ空白です。他の成分の

一つが類似している：

<ScrollView> 

    <StackLayout> 

     <TextField [text]="first_name" hint="First Name" class="purplish label-marg"></TextField> 

     <TextField [text]="last_name" hint="Last Name" class="purplish label-marg"></TextField> 

     <TextField [text]="email" hint="Email" class="purplish label-marg"></TextField> 

     <TextField [text]="company_name" hint="Company name" class="purplish label-marg"></TextField> 

     <TextField [text]="company_position" hint="Position in company" class="purplish label-marg"></TextField> 

     <Label text="Company size" class="purpish label-marg font-weight-bold"></Label> 
     <ListPicker [items]="sizes" 
        [text]="company_size" class="p-15" ngDefaultControl> 
     </ListPicker> 

     <TextField [text]="company_resume" textWrap="true" hint="Company resume" class="purplish label-marg"></TextField> 

     <TextField [text]="year_of_creation" hint="Year of creation of the company" class="purplish label-marg"></TextField> 

     <Label text="Branch of the company" class="purpish label-marg font-weight-bold"></Label> 
     <ListPicker [items]="branches" 
        [text]="branch_company" class="p-15" ngDefaultControl> 
     </ListPicker> 

     <Label text="Country" class="purpish label-marg font-weight-bold"></Label> 
     <ListPicker [items]="countries" [text]="country" class="p-15" ngDefaultControl> 
     </ListPicker> 


     <TextField [text]="city" hint="City" class="purplish label-marg"></TextField> 

     <Label text="You can add job opening in your profile" class="purpish" margin-left="20px"></Label> 

    </StackLayout> 


</ScrollView> 

SegmentedBar成分XML/HTML：

<basictoolbar></basictoolbar> 
<StackLayout> 
    <SegmentedBar #sb [items]="navItems" selectedIndex="0" (selectedIndexChange)="navigate(sb.selectedIndex)"> 

    </SegmentedBar> 

    <router-outlet></router-outlet>  
</StackLayout> 

とTS：

import { Component} from '@angular/core'; 
import { SegmentedBar, SegmentedBarItem } from "ui/segmented-bar"; 
import { Router } from '@angular/router'; 
import {ChangeDetectorRef,ApplicationRef} from '@angular/core'; 

@Component({ 
    selector: 'cvformpage', 
    templateUrl: './components/cvformpage/cvformpage.component.html' 
}) 

export class CvformpageComponent { 

    public navItems: Array<SegmentedBarItem>; 

     public constructor(private router: Router, private _applicationRef: ApplicationRef,private ref:ChangeDetectorRef) { 
      this.navItems = [];   
      this.navItems.push(this.createSegmentedBarItem("Employer Form")); 
      this.navItems.push(this.createSegmentedBarItem("Employee Form"));   


     } 

     private createSegmentedBarItem(title: string): SegmentedBarItem { 
      let item: SegmentedBarItem = new SegmentedBarItem(); 
      item.title = title;   
      return item; 
     } 

     public navigate(index: number) { 
      switch(index) { 
       case 0: 
        console.log("I am here");      
        this.router.navigate(["/employer-form"]); 
        break; 
       case 1: 
        this.router.navigate(["/employee-form"]); 
        break; 
      } 
     } 

} 

Iコンソールでそれを試してみましたログとそれはスイッチの内側と右側のケースの中に入っていますが、何かがルーティングでうんざりしてしまいます。私は、誰かがそれを行う正しい方法で私を助けることができる場合、事前に男に感謝します。

Answer 1

いつか問題の解決策が見つかったので、TabViewは良い方法だと気づいたとにかく、私はTabViewをアイテム交換のルーティングで試してみましたが、動作しません。基本的に何が起こるので：

1.私は、別のコンポーネント

3.これはnativescriptを混乱にルーティングするようにしてみてください

2.ThenタブでページをレンダリングするルーティングしようとするためTabViewまたはSegmentedBarの概念は全く異なり、ビューは「スコープ」内にとどまるべきであると仮定します。つまり、TabViewにアタッチする必要がありますが、代わりにトリなぜならTabView vs SegmentedBar質問のES

に「支配」TabViewを使っだから、簡単な解決策は、このようなtabview'sビューで私の部品の部品/ビューセレクタを置くことと同じくらい簡単です：

<basictoolbar></basictoolbar> 

    <TabView #tabView > 
     <StackLayout *tabItem="{title:'Employer Form'}"> 
      <employer-form></employer-form> 
     </StackLayout> 
     <StackLayout *tabItem="{title:'Employee Form'}"> 
      <employee-form></employee-form> 
     </StackLayout> 
    </TabView>