각도 4 서비스를 통한 라우팅

Question

서비스와 함께 Angular 4 및 REST 응용 프로그램을 연결할 때 오류가 발생합니다. 다음은

오류입니다 :

compiler.es5.js:1694 Uncaught Error: Can't resolve all parameters for TypeaheadComponent: (?, [object Object], [object Object]). 
    at syntaxError (compiler.es5.js:1694) 
    at CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15781) 
    at CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15649) 
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15244) 
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:15903) 
    at eval (compiler.es5.js:15889) 
    at Array.forEach (<anonymous>) 
    at CompileMetadataResolver._getEntryComponentsFromProvider (compiler.es5.js:15888) 
    at eval (compiler.es5.js:15852) 
    at Array.forEach (<anonymous>) 

내가 확인하고 오류에 대한 내 라우터 설정을 두 번 체크 있지만 나 자신을 찾을 수 없습니다. 모든 제안을 부탁드립니다. 여기

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent} from './app.component'; 
import { AppRoutingModule} from './app-routing.module'; 
import {RouterModule, Routes} from '@angular/router'; 
import { TypeaheadComponent } from './shared/typeahead-component'; 
import { HttpModule} from'@angular/http'; 
import {DashboardService} from "./services/dashboard-service"; 



@NgModule({ 
    declarations: [ 
    AppComponent, 
    TypeaheadComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    AppRoutingModule, 
    RouterModule, 
     HttpModule 
    ], 
    providers: [ RouterModule, DashboardService], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 

내 선행 입력-component.ts 관련 코드입니다 :

여기

import {Routes, RouterModule } from '@angular/router'; 
import {NgModule} from '@angular/core'; 
import {TypeaheadComponent} from "./shared/typeahead-component"; 
import {DashboardService} from "./services/dashboard-service"; 

const routes: Routes = [ 
    { path: 'typeahead-component/', component: TypeaheadComponent } 
] 

@NgModule({ 
    imports: [RouterModule.forRoot(routes, { enableTracing: true })], 
    exports: [RouterModule], 
    providers: [DashboardService] 
}) 

export class AppRoutingModule { 

} 

내 app.module.ts 코드 : 여기

내 앱 routing.module.ts 코드 : 여기

constructor(private route: Route, private router: Router, private dashboardHttpService: DashboardService) { 
     this.router.navigate(['typeahead-component/']); 
     this.edit(); 
    } 

내 대시 보드 service.ts입니다 관련 코드 :

constructor(private http: Http, private route: ActivatedRoute, private router: Router) { 
    this.router.navigate(['typeahead-component/']); 
    } 

또한 tsconfig.app.json, tsconfig.spec.json 및 tsconfig.json의 emitDecoratorMetadata는 모두 true로 설정됩니다.

사전 사과 - 나는 plunkr을 사용하는 것에 매우 익숙하기 때문에 이것에 대한 plunkr을 만들지 않았습니다.

구현하고자하는 작업 예제를 매우 감사하게 생각합니다.

감사합니다.

Answer 1

구성 요소의 경우 생성자 매개 변수는 루트가 아닌 주사 서비스 만 가능합니다. 현재 경로가 필요한 경우 대시 구성 요소에서와 같이 ActivatedRoute을 주입하십시오.

constructor(private route: ActivatedRoute, private router: Router, private dashboardHttpService: DashboardService)