我错过了什么所以我可以在 Nativescript 上使用路由器？

Question

我正在尝试使用 nativescript 构建我的第一个应用程序。我正在浏览文档，但不确定我遗漏了什么，所以我无法修复它。

我有以下结构：

- app
-- app-routing.module.ts
-- app.component.html
-- app.component.ts
-- app.css
-- app.module.ts
- home
-- home.component.css
-- home.component.html
-- home.component.ts
- restaurant
-- restaurant.component.css
-- restaurant.component.html
-- restaurant.component.ts

问题是，我正在努力做到当有人点击 home.component.html:

中的元素时

<Image class="h3 m-5" col="0" row="0" src="~/images/beet-logo.jpg" (tap)="visitRestaurant()" height="87" width="80"></Image>

他们被重定向到 restaurant.component.html 页面。

我定义了上面显示的点击事件，然后我的 home.component.ts 上有以下内容：

import { Router } from "@angular/router"; 
import { Component, OnInit } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    constructor(private router: Router) {
    }

    visitRestaurant() {
        this.router.navigate(["/restaurant"]);
    }

    ngOnInit(): void {
    }
}

当我点击它时，它失败了，但出现错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'restaurant'

我想在这里添加路线，也考虑将路线添加到 app-routing.module.ts，但每当我尝试时，我都会得到 cannot find name: RestaurantComponent。所以我假设我需要将组件导出到某个地方但不确定在哪里或如何导出。

你们能帮帮我吗？

这是我的 app-routing-module.ts 如果有用的话：

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./home/home.module#HomeModule" }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

这是我的 restaurant.component.ts 代码：

import { Router } from "@angular/router";
import { Component, OnInit } from "@angular/core";

@Component({
    selector: "Restaurant",
    moduleId: module.id,
    templateUrl: "./restaurant.component.html",
    styleUrls: ['./restaurant.component.css']
})
export class RestaurantComponent implements OnInit {

    constructor(private router: Router) {
    }

    ngOnInit(): void {
    }
}

Answer 1

您需要为 /restaurant 添加路线。例如，您可以这样做：

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./home/home.module#HomeModule" },
    { path: "restaurant", component: RestaurantComponent }
];

此外，您需要确保您的 export/import 语句正确显示。

在restaurant.component.ts内：

@Component({ ... })
export class RestaurantComponent { ... }

在app-routing.module.ts内：

import { RestaurantComponent } from ' ... ';

我错过了什么所以我可以在 Nativescript 上使用路由器？

What am I missing so I can use the router on Nativescript?

nativescript

angular2-routing

angular2-nativescript