Nativescript + Angular Segmented bar無法路由到其他組件？

我想使用SegmentedBar來可視化2種不同組件的表單，如果我刪除與組件的路由的一切工作正常，酒吧本身可視化，但與路由部分甚至酒吧不可視化，只是空白。Nativescript + Angular Segmented bar無法路由到其他組件？

其中一個以外的成分的是相似的：

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

}

我與控制檯嘗試過日誌，它進入交換機內部和正確的情況下，但東西搞砸了路由。如果有人能以正確的方式幫助我做到這一點，我提前感謝你們。

來源

2017-10-07 nitheism

我發現問題的解決方案後，我意識到，TabView是更好的方式去，無論如何，我試圖TabView路由項目變化，它不會工作。因爲基本上會發生什麼：

1.我渲染頁面的標籤

2.然後我嘗試路由到另一個組件

3.這混淆nativescript，因爲路由嘗試將整個頁面更改爲另一個，而TabView或SegmentedBar的概念是完全不同的，並且它認爲該視圖應該停留在「範圍」中換句話說，它應該附加到TabView，而是三ES「稱霸」

因此，使用TabView vs SegmentedBar的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>

來源

2017-10-08 20:54:11 nitheism

Nativescript + Angular Segmented bar無法路由到其他組件？

回答

相關問題