我错过了什么，所以我可以在 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 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：“餐厅”

我曾考虑将路线添加到此处并添加到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 }
];

此外，您需要确保您的导出/导入语句正确显示。

restaurant.component.ts内：

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

app-routing.module.ts内：

import { RestaurantComponent } from ' ... ';