각도 2 구성 요소가 다른 구성 요소로 이동하지 않음

Question

전자에서 교차 플랫폼 데스크톱 검사 응용 프로그램을 디자인하는 Angular를 처음 사용했습니다. 시험이 제출되는 동안 구성 요소는 결과 구성 요소로 이동하지 않지만보기의 다른 곳을 클릭하면 다른 구성 요소로 이동합니다. 내가처럼 내 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); 

Answer 1

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

요구 사항이 여기

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); 
    } 


} 

그리고 다음은

내 제출 코드 :

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

위 예의 슬래시에주의하십시오. Router.navigate 및 Router.navigateByUrl :

Answer 2

은 구성 요소 클래스에 명령 적 탐색 각도의 Router 클래스의 두 가지 방법이 있습니다.

- 절대 경로가 필요합니다.

navigate()은 - 당신이 상대 경로 라우팅을 사용하는 것으로 보인다 상대 경로를 귀하의 경우

이 필요합니다. 따라서 코드를 수정하고 슬래시 /을 추가하여 상대 경로를 참조해야합니다.

귀하의 코드가 수정되었습니다.

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); 
    } 


}