Чего мне не хватает, чтобы я мог использовать роутер на Nativescript? - PullRequest
Новая
       11

Чего мне не хватает, чтобы я мог использовать роутер на Nativescript?

0 голосов
/ 25 сентября 2018

Я пытаюсь создать свое первое приложение, используя 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 {
    }
}

Когда я щелкаю по нему, происходит сбой, хотя с ошибкой:

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: '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 {
    }
}

1 Ответ

0 голосов
/ 25 сентября 2018

Вам необходимо добавить маршрут для /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 ' ... ';
...