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();
}));
我正在尝试在 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();
}));