this.router.navaigate not working

Question

나는 각도 4 앱에서 작업 중이며 버튼을 클릭 할 때 모듈 구성 요소에서 레이아웃 구성 요소로 이동하려고합니다. 그러나 작동하지 않습니다.

및 오류 메시지가 표시되지 않습니다.

저는이 문제를 해결하기 위해 Google에서 많은 시간을 보냈지 만 해결할 수 없습니다.

아래 코드는

HTML :

 <div class="land-item" (click)="qualityrd()">  
     <h3>QAULITY</h3> 
     <i class="fa fa-thumbs-o-up" style="color:blue"></i> 
     <div class="over-item"> 

구성 요소

 import { Component } from '@angular/core'; 
     import { Router ,ActivatedRoute} from '@angular/router' 

     @Component({ 
      selector: 'app-module-selector', 
      templateUrl: './module-selector.component.html', 
      styleUrls: ['../css/style.css','../css/responsive.css'] 
     }) 
     export class ModuleSelectorComponent { 

      constructor(
         private _router:Router,private route: ActivatedRoute ) { } 


      qualityrd():void 
      { 
      this._router.navigate(['/QualityLayout'], { relativeTo: this.route }); 
      } 

     } 

레이아웃 구성 요소

  import { Component } from '@angular/core'; 

    @Component ({ 

     selector: 'my-app', 
     templateUrl:'./Layout.html', 
     styleUrls:['../css/footer.css'] 

    }) 
    export class LayoutComponent { 
     isIn = false; // store state 
     toggleState() { // click handler 
      let bool = this.isIn; 
      this.isIn = bool === false ? true : false; 
     } 
    } 

그리고 마지막으로 내 응용 프로그램 모드 ULE

   import { BrowserModule } from '@angular/platform-browser'; 
     import { NgModule } from '@angular/core'; 
     import { CommonModule } from '@angular/common'; 

     import { FormsModule, FormGroup,FormControl,Validators,FormBuilder,ReactiveFormsModule } from '@angular/forms'; 

     import { HttpModule } from '@angular/http'; 
     import { AppComponent } from './app.component'; 
     import { RouterModule, Routes } from '@angular/router'; 
     import {LayoutComponent} from './Layout/Layout.Component'; 
     import {ExcelDownloadComponent} from './ExcelDownload/ExcelDownload.Component'; 
     import {ExcelUploadComponent} from './ExcelUpload/ExcelUpload.Component'; 
     import {SpotCheckStatusComponent} from './spotCheck/spotcheckstatus.component'; 
     import {PageNotFoundComponent} from './others/PageNotFoundComponent'; 
     import { Component } from '@angular/core'; 
     import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload'; 
     import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload'; 
     import { ModuleSelectorComponent } from './module-selector/module-selector.component'; 


     const appRoutes: Routes = [ 
      { path: 'SPOTCHECK', component: SpotCheckStatusComponent }, 
      { path: 'ExcelDownalod', component: ExcelDownloadComponent }, 
      { path: 'ExcelUpload', component: ExcelUploadComponent }, 
      { path: 'ModuleSelector', component: ModuleSelectorComponent }, 
      { path: 'QualityLayout', component: LayoutComponent }, 
      { path: '', redirectTo:'/ModuleSelector' ,pathMatch:'full' }, 
      { path: '**', component: PageNotFoundComponent } 
     ]; 


     @NgModule({ 
      declarations:[ AppComponent,SpotCheckStatusComponent,PageNotFoundComponent,LayoutComponent, 
      ExcelDownloadComponent,ExcelUploadComponent,ExcelDownloadComponent 
      ,FileDropDirective, FileSelectDirective, ModuleSelectorComponent ], 
      imports: [ BrowserModule , FormsModule,HttpModule,ReactiveFormsModule, 
      RouterModule.forRoot(appRoutes) ], 
      providers: [], 
      bootstrap: [ModuleSelectorComponent] 


     }) 
     export class AppModule { } 

Answer 1

제거

{ relativeTo: this.route } 

당신이 /

['/QualityLayout'] 

과 경로를 앞에 붙여 달성 루트에 상대적 할 필요가

유효한 절대 경로, 필요하다 그것을 경로에 상대적으로 만드십시오.