webentwicklung-frage-antwort-db.com.de

Angular 4 Kann nicht an <property> binden, da es keine bekannte Eigenschaft von <component> ist

Ich versuche, eine eigene Direktive in Angular 4 zu erstellen. Ich habe jedoch diesen Fehler erhalten, wenn Sie die Eigenschaft der Klasse in die Komponentenvorlage binden.

Konsolenfehler:

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>"):

Meine Baumansicht-Komponente.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() { }

}

Hier ist meine komplette Skriptdatei: https://Pastebin.com/hDyX2Kjj

Weiß jemand etwas davon? TiA

8

Jede Komponente, Direktive und Pipe muss in @NgModule() registriert sein.

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

Für mehr Details siehe 

10

Ich habe den gleichen Fehler, wenn Test für ParentComponent ausgeführt wird. Darin befand sich die ChildComponent-Komponente mit der @Input-Eigenschaft: string; . Beide Komponenten wurden auch in app.module.ts deklariert.

Ich habe das so korrigiert (Testdatei der übergeordneten Komponente):

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


1
Kamil Naja

Wie The Aelfinn darauf hingewiesen hat, dass Sie Ihre Komponente in mehreren Modulen verwenden, müssen Sie sie exportieren.ABERSie sollten es nicht importieren, exportieren und in dem Modul deklarieren, das Sie verwenden möchten, da es nicht Teil dieses Moduls ist !!! 
Angenommen, Sie haben ein TreeViewStuffModule , das die TreeViewComponent und ein DoSomethingWithTreeViewModule deklariert, in dem die TreeViewComponent verwendet wird.

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

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