각도 경로 탐색이 다른 구성 요소로 리디렉션되지 않음

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으로 라우팅 할 수있을 때까지 코드를 분석해야합니다 (일부 코드 주석). 그냥 도와 주려고.