Angular 4 无法绑定到 <property>,因为它不是 <component> 的已知 属性

Angular 4 Can't bind to <property> since it isn't a known property of <component>

我正在尝试在 Angular 4 中创建自己的指令。但是,将 class 的 属性 绑定到组件模板时出现此错误。

控制台错误:

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

我的树视图-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

每个组件、指令和管道都需要在 @NgModule()

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

有关详细信息,请参阅

如果您在另一个模块中使用 TreeViewComponent,您将需要 将组件导入@NgModule 中,如下所示:

@NgModule({
    imports: [TreeViewComponent],
    // This says that all components in this module can import TreeViewComponent
    exports: [ThisModulesComponents],
    declarations: [ThisModulesComponents]
})
export class ModuleDependentOnTreeViewComponent

正如 The Aelfinn 所指出的,如果您跨模块使用组件,则需要将其导出。 但是 你不应该在你想使用它的模块中导入、导出和声明它,因为它不是这个模块的一部分!!!
所以假设你有一个 TreeViewStuffModule 声明了 TreeViewComponent 和一个 DoSomethingWithTreeViewModule 其中使用了 TreeViewComponent,您的声明如下:

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

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

我在 运行 测试 ParentComponent 时遇到同样的错误。里面是带有 @Input 属性: string; 的 ChildComponent 组件。 这两个组件也在 app.module.ts.

中声明

我已经这样修复了(父组件测试文件):

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