web-dev-qa-db-ja.com

Angular 4 <component>の既知のプロパティではないため、<property>にバインドできません

Angular 4で独自のディレクティブを作成しようとしています。しかし、クラスのプロパティをコンポーネントテンプレートにバインドすると、このエラーが発生します。

コンソールエラー：

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

私のtree-view-component.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() { }

}

完全なスクリプトファイルを次に示します。 https://Pastebin.com/hDyX2Kjj

これについて知っている人はいますか？ TiA

angulartypescriptangular2-directives
15
Justinus Hermawan

すべてのコンポーネント、ディレクティブ、およびパイプを@NgModule()に登録する必要があります

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

詳細については

19
Günter Zöchbauer

ParentComponentのテストを実行すると、同じエラーが発生します。内部には、@ Inputプロパティを含むChildComponentコンポーネント：string;がありました。両方のコンポーネントもapp.module.ts内で宣言されました。

私はそのようにこれを修正しました（親コンポーネントのテストファイル）：

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

AsAelfinnは、モジュール間でコンポーネントを使用している場合、エクスポートする必要があると指摘しました。 [〜＃〜] but [〜＃〜]このモジュールの一部ではないため、使用したいモジュールでインポート、エクスポート、宣言しないでください!! ！
だから、TreeViewComponentを宣言するTreeViewStuffModuleとDoSomethingWithTreeViewModuleTreeViewComponentが使用されている場合、宣言は次のようになります。

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

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