Question

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

这是我的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]);

我遇到的错误无法匹配任何路线：＆＃39;＆＃39;并且无法读取属性＆＃39; visitExpression＆＃39;未定义的。

我在SO上发现了这篇文章关于默认路由，我改变了我的代码以匹配（我认为无论如何）。见下文。 angular2 rc3 router alpha 3.0.0.7 default route

修改

我已将代码更改为以下内容，但我收到了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)

Answer 1

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

无法匹配任何路线：＆＃39;＆＃39; NativeScript，TypeScript和Angular2

1 个答案: