Question

我正在尝试使用SegmentedBar来显示不同组件中的两种类型的表单，如果我删除带有路由到组件的部件一切正常并且条形图本身可视化，但是路由部分甚至是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;
            }
        }

}

我用控制台日志尝试了它，它进入了交换机内部和正确的情况下，但有些东西搞砸了路由。如果有人能以正确的方式帮助我，我会事先感谢你们。

Answer 1

我在一段时间后找到了问题的解决方案，我意识到TabView是更好的方法，无论如何我尝试TabView在项目更改上路由，但它不起作用。因为基本上会发生什么：

<强> 1。我使用选项卡

呈现页面

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

第3。这会让nativescript感到困惑，因为路由尝试将整个页面更改为另一个页面，而TabView或SegmentedBar的概念则完全不同，并且假设视图应保留在“范围”中换句话说，它应该附加到TabView，而是试图“支配”

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

Nativescript + Angular Segmented bar无法路由到其他组件？

1 个答案: