Nativescript + Angular 分段栏无法路由到其他组件？

Question

我正在尝试使用 SegmentedBar 来可视化位于不同组件中的 2 种类型的表单，如果我删除带有路由到组件的部分，一切正常并且栏本身可视化，但带有路由部分即使是栏也没有可视化，只是空白。

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

<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。我用选项卡

渲染页面

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

3。这让 nativescript 感到困惑，因为路由试图将整个页面更改为另一个页面，而 TabView 或 SegmentedBar 的概念完全不同，它假设视图应该停留在 "scope" 换句话说，它应该附加到 TabView，但它会尝试 "dominate"

因此，由于 TabView vs SegmentedBar 问题而使用 TabView 的简单解决方案就像将组件的 component/view 选择器放在 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>

Nativescript + Angular 分段栏无法路由到其他组件？

Nativescript + Angular Segmented bar can't route to other components?

nativescript

angular2-routing

angular