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

Question

我是 Angular 的新手，正在尝试从 Angular 指南中注入 basic structural directive。这是我的指令：

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;
    }
  }
}

我正在尝试将其注入我的 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 { }

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

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

但我收到错误消息：

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

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], ?)

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

需要说的是，我已经看到并且 emitDecoratorMetadata 已经在 tsconfig.json 中设置为 true。

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

非常感谢

Answer 1

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

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

Answer 2

我刚把我的案子留在这里，因为我的要求正好找到了这个问题。

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

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

我在调用另一个方法之前移动注释时遇到此错误。喜欢

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

onResize(event) {
    // some code
}

希望这对某些人有所帮助！

Answer 3

我有这个错误，在我的例子中是因为我有一个名为 Storage 的服务，但编译器不会将其标记为错误，因为 javascript 有一个名为相同的全局变量.所以我刚刚添加：

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

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

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

typescript

angular-directive

angular