typescript Angular 4 指令错误：无法解析指令的所有参数

Angular 4 directive error: Can't resolve all parameters for directive

提问by Commercial Suicide

I'm totally new to Angular and trying to inject basic structural directivefrom Angular guide. Here is my directive:

我对 Angular 完全陌生，并试图从 Angular 指南中注入基本的结构指令。这是我的指令：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[pcDropdown]'
})
export class DropdownDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private items
  ) { }

  @Input() set pcDropdown(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

I'm trying to inject it in my TradeModule:

我试图将它注入我的TradeModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { TradeComponent } from './trade.component';
import { DropdownDirective } from '../dropdown.directive/dropdown.directive';

@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  declarations: [TradeComponent, DropdownDirective],
  exports: [DropdownDirective]
})
export class TradeModule { }

And use the following part of HTML in my TradeComponent's template:

并在 myTradeComponent的模板中使用以下 HTML 部分：

...
<p *pcDropdown="true">
  TEST
</p>
...

But I'm getting the error:

但我收到错误：

Uncaught Error: Can't resolve all parameters for DropdownDirective: ([object Object], [object Object], ?).

未捕获的错误：无法解析 DropdownDirective 的所有参数：([object Object], [object Object], ?)。

Webstorm is also underlying my @Directivedecorator and say the following:

Webstorm 也是我的@Directive装饰器的基础，并说明以下内容：

Angular: Can't resolve all parameters for DropdownDirective in /home/commercialsuicide/Desktop/my-app/src/client/app/dropdown.directive/dropdown.directive.ts: ([object Object], [object Object], ?)

Angular：无法解析 /home/commercialsuicide/Desktop/my-app/src/client/app/dropdown.directive/dropdown.directive.ts: ([object Object], [object Object], ? )

It also say that my pcDropdowninput is unused:

它还说我的pcDropdown输入未使用：

Need to say, that i already saw this answerand emitDecoratorMetadatais already set to truein tsconfig.json.

需要说的是，我已经看到了这个答案并且emitDecoratorMetadata已经设置为truein tsconfig.json。

Please, point where I misspelled or forgot to include something in my code.

请指出我拼写错误或忘记在代码中包含某些内容的地方。

Many thanks

非常感谢

采纳答案by Günter Z?chbauer

private itemsis missing a type parameter. Angular can't create component instances if it can't resolve all parameters to providers.
Resolving to providers only works with parameter types and @Inject(...)annotations.

private items缺少类型参数。如果 Angular 无法将所有参数解析给提供者，则它无法创建组件实例。
解析为提供者仅适用于参数类型和@Inject(...)注释。

If you don't want itemsto be injected, remove the parameter. There is no situation where you would need to create a component instance yourself to pass the parameter explicitely.

如果不想items被注入，去掉参数。在任何情况下，您都不需要自己创建组件实例来显式传递参数。

回答by dragomirik

I just left my case here, because found just this question by my request.

我只是把我的案子留在这里，因为我的要求发现了这个问题。

I had annotation @HostListener and onResize method. @HostListener should be before and close to the related method. Like

我有注释@HostListener 和 onResize 方法。@HostListener 应该在相关方法之前并接近。喜欢

@HostListener("window:resize", ["$event"])
onResize(event) {
    // some code
}

I got this error when had moved annotation before calling another method. Like

在调用另一个方法之前移动了注释时，我收到了这个错误。喜欢

@HostListener("window:resize", ["$event"])
getSomeObjects (args:any = {}) {
    // some code
}

onResize(event) {
    // some code
}

Hope, this will be helpful for somebody!

希望，这对某人有帮助！

回答by veloz21

I had this error, in my case was because I have a service named Storage, but the compiler won't mark it as error, because javascript have a global variable named the same. So I just added:

我有这个错误，在我的情况下是因为我有一个名为 的服务Storage，但编译器不会将其标记为错误，因为 javascript 有一个名为相同的全局变量。所以我只是补充说：

import { Storage } from '@core/auth/token-storage.service';