角度経路のナビゲーションが他のコンポーネントにリダイレクトされない

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

     } 

レイアウトコンポーネント

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

、最終的に私のアプリモジュール

   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

以下は、私のapp.moduleの部分コードです。

providers: [CategoryService, SubCategoryService, FeaturedBrandService, 
    {provide: LocationStrategy, useClass: HashLocationStrategy} 
], 
bootstrap: [AppComponent] ** instead of Module Selector component 
}) 
export class AppModule { } 

コードはこの変更に対応しています。それ以外の場合は、QualityLayoutにルーティングできるようになるまで、あなたのコードを分解しなければならないかもしれません（あなたのコードのいくつかのコメント）。ただ助けようとしています。