Nativescript + Angular Segmentierter Balken kann nicht zu anderen Komponenten weitergeleitet werden?

Question

Ich versuche eine SegmentedBar zu verwenden, um zwei Arten von Formularen zu visualisieren, die sich in einer anderen Komponente befinden. Wenn ich das Teil mit dem Routing zu den Komponenten entferne, funktioniert alles einwandfrei und die Leiste selbst visualisiert, aber mit dem Routing-Teil sogar die Leiste visualisiert nicht und ist nur leer.

Eine der Komponenten, die andere ist ähnlich:

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

Die SegmentedBar Komponente xml/html:

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

    </SegmentedBar> 

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

und die 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; 
      } 
     } 

} 

ich es mit Konsole versucht log und es kommt in den Schalter und in den richtigen Fall, aber etwas ist mit dem Routing versaut. Ich danke Ihnen im Voraus Jungs, wenn mir jemand auf dem richtigen Weg helfen kann.

Answer 1

Ich fand die Lösung für das Problem nach einiger Zeit, erkannte ich, dass TabView ist der bessere Weg zu gehen, jedenfalls versuchte ich TabView mit Routing auf Artikel ändern und es wird nicht funktionieren. Denn im Grunde, was passiert:

1. ich eine Seite mit dem Tabs machen

2.Then ich Route versuchen, auf eine andere Komponente

3. Das verwirrt nativescript, weil Routing versucht um die ganze Seite zu einem anderen zu ändern, während das Konzept von TabView oder SegmentedBar ist ganz anders und es vermutet, dass die Ansicht sollte in der "Scope" mit anderen Worten sollte es an die TabView angeschlossen werden, aber stattdessen es Tri es zu „beherrschen“

So ist die einfache Lösung mit TabView wegen TabView vs SegmentedBar Frage ist so einfach wie die Komponente/Ansicht Selektoren meiner Komponenten in der tabview's Ansicht wie folgt zu setzen:

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