Question

我正在关注有关Pluralsight的课程，但遇到了一个问题。我必须事先说，他们建议在我使用最新版本的Angular CLI时使用。

跟随涉及依赖项注入主题的模块，我收到一个错误（无法解析EventsListComponent的所有参数：（？）），并且页面拒绝加载。我已经能够解决该问题，但是我认为我的解决方案不是正确的方法，我想知道正确的解决方案应该是什么。

我一直在浏览Internet，但是由于某些原因，我必须忽略某些东西，因为仅使用@Injectable（）装饰器无法使其正常工作。

我有一个名为event.service.ts的文件

@Injectable()
export class EventService {
  getEvents() {
    return EVENTS;
  }
}

其中的事件是一个常量数组

const EVENTS = [
  {
    id: 1,
    name: 'Angular Connect',
    date: '9/26/2036',
    time: '10:00 am',
    price: 599.99,
    imageUrl: '/assets/images/angularconnect-shield.png',
    location: {
      address: '1057 DT',
      city: 'London',
      country: 'England'
    }
  }
];

以及我在app.module.ts中注册的

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    EventsAppComponent,
    EventsListComponent,
    EventThumbnailComponent,
    NavBarComponent
  ],
  providers: [EventService],
  bootstrap: [EventsAppComponent]
})

根据该过程，以下应将服务注入到我的组件中（但会导致提到的错误）

export class EventsListComponent {
  events: any[];
  constructor(private eventService: EventService) {
    // should be done in the onInit hook but that is the next step in the course
    this.events = this.eventService.getEvents();
  }
}

我可以通过以下方式解决此更改代码

export class EventsListComponent {
  events: any[];
  eventService: EventService;
  constructor(@Inject(EventService) eventService: EventService) {
    this.eventService = eventService;
    this.events = this.eventService.getEvents();
  }
}

我对自己在做的错误感到困惑，因为在解决方案中应该由@Injectable（）装饰者来处理。

什么是引起错误的原因，我该如何以正确的方式解决它？

Answer 1

我设法解决了这个问题。

似乎与他们使用的一种过时依赖有关。

我通过使用创建新的角度项目时生成的默认依赖关系结构解决了该问题。然后，我手动添加了jquery依赖项和ngf-bootstrap依赖项。

导致错误的原因：无法解析EventsListComponent的所有参数：（？）？

1 个答案: