Nativescript + Angular Segmented bar는 다른 구성 요소로 라우팅 할 수 없습니까?

Question

다른 구성 요소에있는 두 가지 유형의 양식을 시각화하기 위해 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; 
      } 
     } 

} 

내가 콘솔 그것을 시도 로그와 스위치 내부 및 오른쪽 케이스 내부에 도착하지만, 뭔가 라우팅이 엉망이됩니다. 나는 누군가가 나를 올바른 방법으로 도와 줄 수 있다면 선배들에게 감사한다.

Answer 1

언젠가 후에 문제의 해결책을 찾았습니다. TabView이 더 좋은 방법이라는 것을 깨달았습니다. 어쨌든 항목 변경시 라우팅을 사용하여 TabView을 시도했지만 작동하지 않습니다. 기본적으로 어떤 일이 발생하기 때문에 :

1. 나는, 다른 구성 요소

3.이 nativescript를 혼란에 경로로 시도

2.Then의 탭 페이지를 렌더링 라우팅 시도하기 때문에 TabView 또는 SegmentedBar의 개념은 전혀 다른데,보기가 "범위"에 머물러야한다고 가정하면 다른 말로하면 TabView에 첨부해야하지만 대신에 tri "지배"에스

따라서이 같은 tabview's보기 내 구성 요소의 구성 요소 /보기 선택기를 넣어 같은 질문은 간단 TabView 때문에 TabView vs SegmentedBar의 사용 간단한 해결책 :

<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>