web-dev-qa-db-fra.com

Angular 4 Impossible de se lier à <property> puisqu'il ne s'agit pas d'une propriété connue de <composant>

J'essaie de créer ma propre directive dans Angular 4. Mais, j'ai eu cette erreur lorsque lier la propriété de la classe dans le modèle de composant.

Erreur de console:

Unhandled Promise rejection: Template parse errors: Can't bind to
'data' since it isn't a known property of 'tree'. ("<tree [ERROR
->][data]="data"></tree>"):

Mon arborescence-composant.ts:

@Component({
    selector: 'app-tree-view',
    template: '<tree [data]="data"></tree>'
})
export class TreeViewComponent implements OnInit {

    @Input() data: any[];

    constructor() {
        this.data = [
        {
            label: 'a1',
            subs: [
                {
                    label: 'a11',
                    subs: [
                        {
                            label: 'a111',
                            subs: [
                                {
                                    label: 'a1111'
                                },
                                {
                                    label: 'a1112'
                                }
                            ]
                        },
                        {
                            label: 'a112'
                        }
                    ]
                },
                {
                    label: 'a12',
                }
            ]
         }
     ];
  }

  ngOnInit() { }

}

Voici mon fichier de script complet: https://Pastebin.com/hDyX2Kjj

Est-ce que quelqu'un sait à ce sujet? TiA

angulartypescriptangular2-directives
8
Justinus Hermawan

Chaque composant, directive et tuyau doivent être enregistrés dans @NgModule()

@NgModule({
  declarations: [TreeViewComponent]
})
export class AppModule {}

Pour plus de détails, voir 

10
Günter Zöchbauer

J'ai la même erreur lors de l'exécution du test de ParentComponent. Le composant ChildComponent avec la propriété @Input: string; ..__ était à l'intérieur. Les deux composants étaient également déclarés dans app.module.ts.

J'ai corrigé ceci comme ça (fichier de test du composant parent):

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent]// added child component declaration here
    })
      .compileComponents();
  }));
1
Kamil Naja

Comme The Aelfinn a souligné que si vous utilisez votre composant entre modules, vous devez l'exporter. MAIS vous ne devez pas importer, exporter et déclarer dans le module que vous voulez utiliser, car il ne fait pas partie de ce module !!! 
Supposons donc que vous avez un TreeViewStuffModule qui déclare le TreeViewComponent et un DoSomethingWithTreeViewModule où TreeViewComponent est utilisé, vos déclarations sont les suivantes:

@NgModule({
  declarations: [
    TreeViewComponent
  ],
  exports: [
    TreeViewComponent
  ]
})
export class TreeViewStuffModule { }

@NgModule({
  imports: [
    TreeViewStuffModule
  ]
})
export class DoSomethingWithTreeViewModule
0
D4rth B4n3