web-dev-qa-db-fra.com

Angular 4 erreur de directive: impossible de résoudre tous les paramètres de la directive

Je suis totalement nouveau à Angular et j'essaie d'injecter directive structurelle de base de Angular guide Voici ma 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;
    }
  }
}

J'essaie de l'injecter dans ma 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 { }

Et utilisez la partie suivante de HTML dans le modèle de ma TradeComponent:

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

Mais je reçois l'erreur:

Erreur non capturée: Impossible de résoudre tous les paramètres de DropdownDirective: ([objet objet], [objet objet],?).

Webstorm est également à la base de mon décorateur @Directive et dit ce qui suit:

Angular: Impossible de résoudre tous les paramètres de DropdownDirective dans /home/commercialsuicide/Desktop/my-app/src/client/app/dropdown.directive/dropdown.directive.ts: ([objet objet], [objet objet],?)

 enter image description here

Il indique également que ma saisie pcDropdown est inutilisée:

 enter image description here

Il faut dire que j'ai déjà vu cette réponse et emitDecoratorMetadata est déjà défini sur true dans tsconfig.json.

S'il vous plaît, indiquez le point où j'ai mal orthographié ou oublié d'inclure quelque chose dans mon code.

Merci beaucoup

angulartypescriptangular-directive
4
Commercial Suicide

private items manque un paramètre de type. Angular ne peut pas créer d'instances de composant s'il ne peut pas résoudre tous les paramètres pour les fournisseurs.
La résolution en fournisseur ne fonctionne qu'avec les types de paramètres et les annotations @Inject(...).

Si vous ne voulez pas que items soit injecté, supprimez le paramètre. Il n'y a pas de situation où vous auriez besoin de créer vous-même une instance de composant pour transmettre explicitement le paramètre.

4
Günter Zöchbauer

Je viens de laisser mon cas ici, car trouvé juste cette question par ma demande.

J'ai eu l'annotation @HostListener et la méthode onResize. @HostListener doit être avant et proche de la méthode associée. Comme 

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

J'ai eu cette erreur quand j'avais déplacé l'annotation avant d'appeler une autre méthode. Comme

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

onResize(event) {
    // some code
}

Espérons que cela sera utile pour quelqu'un!

0
dragomirik