4

我正在使用新的 Angular 路由器版本 3.0.0-alpha.7 使用带有 Angular2 rc3 的 NativeScript 2.1.0 和 TypeScript 1.8.10 中的应用程序。我正在尝试使用 page-router-outlet，但出现错误。我目前正在 Windows 上的模拟器中在 Android 5.1.1 中编译和测试。该应用程序确实为我运行了一次，但即便如此我也遇到了Cannot match any routes: ''错误。我改变了一些东西（不确定是什么），但现在当它运行时我只看到一个空白页面，我在下面是我的 PageNavigationApp 组件。我的意图是访问第 1 页和第 2 页，但我想我不了解我的 page-router-outlet 组件的作用。除此之外，我在应用程序运行时看到很多错误。

这是我的 main.ts 文件中的代码：

import {nativeScriptBootstrap} from 'nativescript-angular/application';
import {Component} from '@angular/core';
import {Router, RouterConfig} from '@angular/router';
import {NS_ROUTER_DIRECTIVES, nsProvideRouter} from 'nativescript-angular/router';

@Component({
    selector: 'nav',
    directives: [NS_ROUTER_DIRECTIVES],
    template: `<page-router-outlet></page-router-outlet>`
})
export class PageNavigationApp { 
}

@Component({
    selector: "first",
    directives: [NS_ROUTER_DIRECTIVES],
    template: `
    <StackLayout>
        <Label text="First component" class="title"></Label>
        <Button text="GO TO SECOND" [nsRouterLink]="['/second']" class="link"></Button>
    </StackLayout>`
})
export class FirstComponent { }

@Component({
    selector: "second",
    directives: [NS_ROUTER_DIRECTIVES],
    template: `
    <StackLayout>
        <Label text="Second component" class="title"></Label>
        <Button text="GO TO FIRST" [nsRouterLink]="['/first']" class="link"></Button>
    </StackLayout>`
})
export class SecondComponent { }

const routes: RouterConfig = [
    /*{path: "", redirectTo: "/first", terminal: true },*/
    {path: "nav", component: PageNavigationApp},
    {path: "first", component: FirstComponent},
    {path: "second", component: SecondComponent}
]

export const APP_ROUTER_PROVIDERS = [
    nsProvideRouter(routes, {enableTracing: false})
]

nativeScriptBootstrap(PageNavigationApp, [APP_ROUTER_PROVIDERS]);

我得到的错误是无法匹配任何路由：''和无法读取未定义的属性'visitExpression'。

我在 SO Concerning default routes 上找到了这篇文章，并更改了代码以匹配（无论如何我认为）。见下文。 angular2 rc3 路由器 alpha 3.0.0.7 默认路由

编辑

我已将代码更改为以下内容，但出现 visitExpression 错误：

...

@Component({
    selector: 'nav',
    directives: [NS_ROUTER_DIRECTIVES],
    template: `<page-router-outlet></page-router-outlet>`
})

...

const routes: RouterConfig = [
    {path: '', redirectTo: '/first', terminal: false },
    {path: 'first', component: FirstComponent},
    {path: 'second', component: SecondComponent}
]

我得到的新错误是：

Uncaught (in promise): TypeError: Cannot read property 
'visitExpression' of undefined at resolvePromise
(/data/data/org.nativescript.myapp/files/app/tns_modules/
zone.js/dist/zone-node.js:496:32)
4

1 回答 1

-1

您的问题是您没有为路由器设置默认页面。在路由器配置中，您应该添加 useAsDefault: true到您想要首先显示的路由。

于 2016-07-05T14:20:39.180 回答