Angular Nativescript+角度分段条不能路由到其他组件？

我尝试使用分段栏来可视化不同组件中的两种类型的表单，如果我移除带有组件布线的零件，一切正常，并且栏本身可视化，但对于布线零件，甚至栏也不可视化，只是空白

其中一个部件与另一个部件相似：

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

}

---

我用控制台日志尝试了一下，结果它进入了交换机和正确的机箱，但是路由出了问题。如果有人能帮我找到正确的方法，我会提前向大家表示感谢。

我找到了解决问题的方法。过了一段时间，我意识到TabView是一种更好的方法，不管怎样，我尝试了TabView，在项目更改时发送路线，但它不起作用。因为基本上发生了什么：

一,。我呈现带有选项卡的页面

2.然后我尝试路由到另一个组件

三,。这混淆了nativescript，因为路由试图将整个页面更改为另一个页面，而TabView或SegmentedBar的概念则完全不同，它假设视图应该保留在范围内，换句话说，它应该附加到TabView，但它试图占据主导地位

因此，使用TabView的简单解决方案非常简单，可以将我的组件的组件/视图选择器放在TabView的视图中，如下所示：

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