Angular 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>)

我已经检查并仔细检查了我的路由器设置是否有任何错误，但我自己似乎找不到任何错误。任何建议表示赞赏。

这是我的应用程序-routing.module.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 代码：

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相关代码：

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

这是我的dashboard-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

在组件中，构造函数参数只能是可注入服务，而 Route 不是。如果您需要当前路线，请像在破折号组件中一样注入 ActivatedRoute：

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

Angular 4 路由服务

Angular 4 Routing with a Service

angular

typescript

angular4-router