Angular 2组件无法导航到其他组件

• Z时代
• 2024-01-10
• 分类：问答

我是Angular的新手，在Electron中设计一个跨平台的桌面应用程序。在提交考试时，组件不会导航到结果组件，但当我在视图上的其他位置单击时，它将导航到另一个组件。Angular 2组件无法导航到其他组件

这是我提交代码：

submit() { 
    try { 
     if(this.sub != null){ 
      this.sub.unsubscribe(); 
     } 
     this._dataService.examConfigurationModel = this.examConfigurationModel; 
     this._router.navigate(['resultpanel']); 
     alert('Navigation performed'); 
    } 
    catch (Error) { 
     console.log(JSON.stringify(Error.message)) 
     alert(Error.message); 
    } 
} 

，在这里我有我的App.routes

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HomeComponent } from './components/home.component'; 
import { LoginComponent } from './components/auth/login.component'; 
import { VerifyComponent } from './components/auth/verify.component'; 
import { RegisterComponent } from './components/auth/register.component'; 
import { LanguageComponent } from './components/preference/language.component'; 
import { QualificationComponent } from './components/preference/qualification.component'; 
import { CategoriesComponent } from './components/preference/categories.component'; 
import { NewsComponent } from './components/news/news.component'; 
import { ExamComponent } from './components/exam/exam.component'; 
import { ExamCategoryComponent } from './components/exam/exam_category.component'; 
import { BookHomeComponent } from './components/book/home.component'; 
import { BookBaseComponent } from './components/book/base.component'; 
import { BookCategoryComponent } from './components/book/book_category.component'; 
import { JobComponent } from './components/job/job.component'; 
import { DetailsComponent } from './components/book/details.component' 
import { BookPdfComponent } from './components/book/pdf.component' 
import { ExamBaseComponent } from './components/exam/base.component' 
import { MyExamComponent } from './components/exam/my_exam.component' 
import { ExamDetailsComponent } from './components/exam/details.component' 
import { resultComponent } from './components/exam/result.component' 
import { ResultDetailComponent } from './components/exam/result_detail.component' 
import { topfreeComponent } from './components/exam/topfree.component' 
import { ExamPanelComponent } from './components/exam/exampanel.component' 
import { ResultPanelComponent } from './components/exam/resultpanel.component' 
import { JobDetailssComponent } from './components/job/details.component' 
import { JobBaseComponent } from './components/job/base.component'; 
import { SavedJobs } from './components/job/savedjob.component'; 
import { SavedJobDetails } from './components/job/savedjob.details.component'; 
import { SuggestedComponent } from './components/book/suggested.component'; 
import { BookLanguageComponent } from './components/book/languagebook.component'; 
import { MyInstitutes } from './components/preference/myinstitutes.component'; 
import { forgetComponent } from './components/auth/forgetPass.component' 
import { ExplanationPanel } from './components/exam/explanationpanel.component' 
import { savePreference } from './components/auth/savePreference.component' 
const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'verify', component: VerifyComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'forgetpassword', component: forgetComponent }, 
    { path: 'readBook', component: BookPdfComponent }, 
    { path: 'exampanel', component: ExamPanelComponent }, 
    { path: 'resultpanel', component: ResultPanelComponent }, 
    { path: 'explanationpanel', component: ExplanationPanel }, 
    { 
    path: 'home', component: HomeComponent, children: [ 
     { path: '', redirectTo: 'news', pathMatch: 'full' }, 
     { path: 'language', component: LanguageComponent }, 
     { path: 'qualification', component: QualificationComponent }, 
     { path: 'categories', component: CategoriesComponent }, 
     { path: 'myinstitutes', component: MyInstitutes }, 
     { path: 'savepreferences', component: savePreference }, 
     { path: 'news', component: NewsComponent }, 
     { 
     path: 'book', component: BookBaseComponent, children: [ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { 
      path: 'home', component: BookHomeComponent, children: [ 
       { path: '', redirectTo: 'suggestedBooks', pathMatch: 'full' }, 
       { 
       path: 'suggestedBooks', component: SuggestedComponent, children: [ 
        { path: 'details', component: DetailsComponent } 
       ] 
       }, 
       { 
       path: 'languagesBooks', component: BookLanguageComponent, children: [ 
        { path: 'detailsofbook', component: DetailsComponent } 
       ] 
       } 
      ] 
      }, 
      { 
      path: 'bookmore', component: BookCategoryComponent, children: [ 
       { path: 'details', component: DetailsComponent } 
      ] 
      } 
     ] 
     }, 
     { 
     path: 'exam', component: ExamBaseComponent, children: [ 
      { path: '', redirectTo: 'suggested', pathMatch: 'full' }, 
      { 
      path: 'suggested', component: ExamComponent, children: [ 
       { path: 'examDetails', component: ExamDetailsComponent } 
      ] 
      }, 
      { 
      path: 'myexams', component: MyExamComponent, children: [ 
       { path: 'examDetailsMyExams', component: ExamDetailsComponent } 
      ] 
      }, 
      { 
      path: 'myResult', component: resultComponent, children: [{ 
       path: 'resultDetail', component: ResultDetailComponent 
      } 
      ] 
      }, 
      { 
      path: 'topFree', component: topfreeComponent, children: [ 
       { path: 'topFreeDetails', component: ExamDetailsComponent } 
      ] 
      }, 
      { path: 'moreExams', component: ExamCategoryComponent } 
     ] 
     }, 
     { 
     path: 'job', component: JobBaseComponent, children: [ 
      { path: '', redirectTo: 'jobhome', pathMatch: 'full' }, 
      { 
      path: 'jobhome', component: JobComponent, children: [ 
       { path: 'jobdetails', component: JobDetailssComponent } 
      ] 
      }, 
      { 
      path: 'savedjobs', component: SavedJobs, 
      children: [ 
       { path: 'savejobdetails', component: SavedJobDetails } 
      ] 
      } 
     ] 
     } 
    ] 
    }, 
]; 
@NgModule({ 
    imports: [ 
    RouterModule.forRoot(routes, { useHash: true }) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class AppRoutingModule { } 
export const routingComponenets = [LoginComponent, 
    HomeComponent, 
    VerifyComponent, 
    RegisterComponent, 
    LanguageComponent, 
    QualificationComponent, 
    CategoriesComponent, 
    NewsComponent, 
    ExamComponent, 
    ExamCategoryComponent, 
    BookHomeComponent, 
    BookBaseComponent, 
    BookCategoryComponent, 
    DetailsComponent, 
    JobComponent, 
    BookPdfComponent, 
    ExamBaseComponent, 
    MyExamComponent, 
    ExamDetailsComponent, 
    resultComponent, 
    ResultDetailComponent, 
    topfreeComponent, 
    ExamPanelComponent, 
    ResultPanelComponent, 
    JobBaseComponent, 
    JobDetailssComponent, 
    SavedJobs, 
    SavedJobDetails, 
    SuggestedComponent, 
    BookLanguageComponent, 
    MyInstitutes, 
    forgetComponent, 
    ExplanationPanel, 
    savePreference] 

和App.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
/* 
* Angular Modules 
*/ 
import { enableProdMode, NgModule, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 
import { RouterModule, Router } from '@angular/router'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './components/app.component'; 
import { SearchFilterPipe } from './pipes/SearchFilterPipe' 
import { FileSizePipe } from './pipes/FileSizePipe' 
import { AppRoutingModule, routingComponenets } from './app.routes'; 
import { PdfViewerComponent } from 'ng2-pdf-viewer'; 
import{PdfViewerServices} from './services/pdfViewer' 
import{DataService} from './services/data.service'; 
import { ChartsModule } from 'ng2-charts/ng2-charts'; 
import Chart from 'chart.js'; 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     BrowserAnimationsModule, 
     AppRoutingModule, 
     ChartsModule 
    ], 
    declarations: [ 
     SearchFilterPipe, 
     FileSizePipe, 
     AppComponent, 
     routingComponenets, 
     PdfViewerComponent], 
    bootstrap: [AppComponent], 
    schemas: [ 
     CUSTOM_ELEMENTS_SCHEMA 
    ], 
    providers:[PdfViewerServices,DataService] 
}) 
export class AppModule { } 
platformBrowserDynamic().bootstrapModule(AppModule); 

回答：

this._router.navigate(['resultpanel']); 

this._router.navigate(['/resultpanel']); 

回答：

submit() { 
    try { 
     if(this.sub != null){ 
      this.sub.unsubscribe(); 
     } 
     this._dataService.examConfigurationModel = this.examConfigurationModel; 

 alert('Navigation performed'); 
    } 
    catch (Error) { 
     console.log(JSON.stringify(Error.message)) 
     alert(Error.message); 
    } 
} 

以上是 Angular 2组件无法导航到其他组件 的全部内容， 来源链接： utcz.com/qa/261820.html