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

Posted 2023-02-22

【中文标题】Angular 4 无法绑定到 <property> 因为它不是 <component> 的已知属性

【英文标题】：Angular 4 Can't bind to <property> since it isn't a known property of <component>

【发布时间】：2017-08-25 04:01:06

【问题描述】：

我正在尝试在 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>"):

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

有人知道吗？钛酸

【问题讨论】：

您不需要标记输入两次，`inputs: ['data'],` 或@Input() 如果两者都有，则一个是多余的。你把Node加到declarations of @NgModule()`了吗？

plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5 提供了一个现成的 Angular2 模板 - 只需按下“新建”按钮和“Angular”。

已通过在@NgModule() 中的声明数组中添加 TreeNodeComponent、TreeComponent、adn TreeViewComponent 来解决。有没有另一种方法只在 @NgModule() 中包含 TreeViewComponent 而没有 TreeNodeComponent 和 TreeComponent？因为我已经将它包含在 TreeViewComponent 中。

抱歉，我不知道您所说的“因为我已经将它包含在 TreeViewComponent 中”是什么意思。你的意思是TreeViewModule？

我在 TreeComponent 中做了 import TreeNodeComponent from './tree-view.node.component';，在 TreeViewComponent 中做了 import TreeComponent from './tree.component';。为什么要在 app.module 中再次包含它们？仅仅在声明中包含 TreeViewComponent 还不够吗？

【参考方案1】：

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

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

更多详情见

https://angular.io/api/core/NgModule https://angular.io/guide/ngmodules https://angular.io/guide/ngmodule-api

【讨论】：

tree.module.ts: ' ... @NgModule( 声明：[ TreeNodeComponent, TreeComponent, TreeViewComponent ] ... ... ' 和app.module.ts: ` 进口： [ . .. TreeModule ...]`可以吗？

是的，正如你的问题下面提到的，这通常是正确的方法，但对于还不熟悉@NgModule() 的人来说通常更难理解。但似乎你已经明白了;-)

@GünterZöchbauer：你能更新链接吗？当前链接已损坏。

@BhavikShah 感谢您的提示！已更新。

【参考方案2】：

在为 ParentComponent 运行测试时，我遇到了同样的错误。里面是带有@Input 属性的 ChildComponent 组件：字符串；。 这两个组件也在 app.module.ts 中声明。

我已经这样修复了（父组件测试文件）：

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

【参考方案3】：

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

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

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

【参考方案4】：

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

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

【讨论】：

你不应该在它不属于的其他模块中导入导出并声明组件