this.router.navigate 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; 
     } 
    } 

し、最終的に私のアプリのmod 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

それはあなたが/

['/QualityLayout'] 

にパスを付けることによって達成ルートへの相対的である必要が

{ relativeTo: this.route } 

を削除する必要に、有効な絶対パスではありませんそれをルートに関連させます。