NativeScript Angular：错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'addpatient'答案

【问题标题】：NativeScript Angular: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'addpatient'NativeScript Angular：错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'addpatient'
【发布时间】：2018-08-22 18:05:24
【问题描述】：

所以我只想让 home.component.ts 中的 fab 按钮路由到我的 addpatient.component。使用标签脚手架，并将我的 addpatient 文件夹放在主文件夹中。这是我的目录的样子：

app directory
rest of app directory

我对此真的很陌生，所以我觉得我只是错过了一些非常简单的东西

home.component.ts

import { Component, OnInit, ViewContainerRef, NgModule } from 
"@angular/core";
var Sqlite = require("nativescript-sqlite");
import { registerElement } from "nativescript-angular/element-registry";
import { Fab } from "nativescript-floatingactionbutton";

import { AddPatientComponent } from "./addpatient/addpatient.component";

import { Router } from "@angular/router";
registerElement("Fab", () => Fab);


@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    constructor(private router: Router){}

    public redirectAddPatient(){
        this.router.navigate(["addpatient]);
    }
}

home.component.html

<FAB row="1" (tap)="redirectAddPatient()" icon="res://ic_plus_white" rippleColor="#f1f1f1" class="fab-button"></FAB>

addpatient.component.ts

import { Component } from "@angular/core";
import { Patient } from "./../../objects/patient.module"
import { NativeScriptRouterModule } from "nativescript-angular/router";

@Component({
    selector: "addpatient",
    moduleId: module.id,
    templateUrl: "./addpatient.component.html"
})

export class AddPatientComponent {
    public lastname: string;

    ngOnInit(): void{
        let patient = new Patient();

        patient.setLastName(this.lastname);
        console.log("lastname: ", patient.getLastName());
    }
}

app.routing.ts

import { AddPatientComponent } from 
"./tabs/home/addpatient/addpatient.component";
import { HomeComponent } from "./tabs/home/home.component";

export const appRoutes: any = [
    {path: "", component: HomeComponent},
    {path: "addpatient", component: AddPatientComponent}
];

export const appComponents: any = [
    HomeComponent,
    AddPatientComponent
];

main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { appComponents, appRoutes } from "./app.routing";

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
})

class AppComponentModule {

}

platformNativeScriptDynamic().bootstrapModule(AppModule);

【问题讨论】：

标签： angular typescript routing nativescript

【解决方案1】：

首先，您的 HomeComponent 的 redirectAddPatient() 中缺少引用：this.router.navigate(["addpatient*here*]); 其次，您引导的模块是 AppModule，而不是 AppComponentModule。我建议将 AppComponentModule 的声明和导入添加到您的 AppModule 并完全删除 AppComponentModule，因为它没有任何用途（据我所知）。

【讨论】：