web-dev-qa-db-fra.com

Impossible de se lier à 'x' car ce n'est pas une propriété connue de 'y'

J'ai un site angular qui contient un composant dans un autre composant. J'utilise le routage et le chargement paresseux du composant externe (ComponentA). Le composant interne (ComponentB) dépend d'une directive tierce.

Voici le preuve de concept (ouvrez la console pour voir l'erreur).

Je reçois une erreur lorsque j'utilise la directive tierce dans ComponentB. Ce n'est pas une erreur avec la directive elle-même, mais une erreur avec la façon dont j'ai structuré mon code.

<tree-root [nodes]="nodes"></tree-root>

Impossible de se lier aux 'nœuds' car ce n'est pas une propriété connue de 'racine-arbre'

Je peux résoudre ce problème en important le module tiers dans ComponentA, mais comme ComponentA ne dépend pas de ce module, il est erroné de le faire.

Le Plunker que j'ai créé est une très petite partie de mon application, conçue pour isoler le problème. Il s'agit de démontrer un concept et non de donner un sens à une application. Ce que j'essaie de faire est de créer un composant pouvant être ajouté à n'importe laquelle de mes pages. Ce composant peut être un widget ou quelque chose qui a été ajouté à une ou plusieurs pages parent. C'est autonome.

Ma connaissance limitée dans Angular commence à apparaître ici. Étant donné que les composants sont supposés nous permettre d'effectuer un développement basé sur les composants en divisant notre application en parties plus petites, je ne comprends pas pourquoi ComponentA a besoin de connaître les dépendances dont dispose ComponentB pour pouvoir l'utiliser de son point de vue.

Je démontrerai également qu'il ne s'agit que d'un problème, car j'ai une directive tierce incluse dans ComponentB. Si je supprime la directive, tout fonctionne. Par exemple, si j'ai fait quelque chose comme ceci à la place:

<ul>
    <li *ngFor="let node of nodes">
        {{ node.name }}
    </li>
</ul>

l'application fonctionne correctement, sans erreur.

Qu'est-ce que j'ai mal fait et que devrais-je faire différemment? Si la solution consiste à ajouter une importation à ComponentA, j'accepterai comme réponse une bonne explication fournie (par exemple, pourquoi *ngFor Fonctionne alors que la directive tree-root Ne fonctionne pas).

angulartypescript
35
Lydon

Je suis retourné au début et j'ai réalisé ce que j'avais manqué:

Dans feature-b.module.ts J'aurais dû exporter le composant:

exports: [
    FeatureBComponent
]

Il me fallait aussi importer FeatureBModule plutôt que FeatureBComponent.

importer {FeatureBComponent} de '../feature-b/feature-b.component';

import { FeatureBModule } from '../feature-b/feature-b.module';
43
Lydon

J'ai pu exécuter l'application en supprimant entièrement FeatureBModule. Ensuite, FeatureAModule est correct car il faut ensuite supprimer FeatureBComponent.

Le FeatureAModule ressemble alors à ceci:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';

import { FeatureAComponent }           from './feature-a.component';
import { FeatureARoutingModule }       from './feature-a-routing.module';
import { TreeModule }                  from 'angular-tree-component';

import { FeatureBComponent } from '../feature-b/feature-b.component';

@NgModule({
  imports: [
    CommonModule,
    FeatureARoutingModule,
    TreeModule
  ],
  declarations: [
    FeatureAComponent,
    FeatureBComponent
  ]
})
export class FeatureAModule {}

J'ai mis à jour le lecteur ici: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview

3
DeborahK