无法绑定到“x”，因为它不是“y”的已知属性答案

【问题标题】：Can't bind to 'x' since it isn't a known property of 'y'无法绑定到“x”，因为它不是“y”的已知属性
【发布时间】：2017-09-17 06:51:21
【问题描述】：

我有一个 Angular 站点，其中包含另一个组件中的一个组件。我正在使用路由和延迟加载外部组件（ComponentA）。内部组件 (ComponentB) 依赖于第 3 方指令。

这是proof of concept（打开控制台查看错误）。

在 ComponentB 中使用 3rd 方指令时出现错误。这不是指令本身的错误，而是我的代码结构错误。

<tree-root [nodes]="nodes"></tree-root>

无法绑定到“节点”，因为它不是“树根”的已知属性

我可以通过在 ComponentA 中导入 3rd 方模块来解决这个问题，但是由于 ComponentA 不依赖这个模块，所以这样做感觉不对。

我创建的 Plunker 只是我的应用程序的一小部分，旨在隔离问题。这是为了展示一个概念，而不是作为一个应用程序有意义。我想要实现的是创建一个可以添加到我的任何页面的组件。这个组件可以是一个小部件或其他东西，添加到一个或多个父页面。它是独立的。

我在 Angular 方面的有限知识开始在这里展示。由于组件应该允许我们进行基于组件的开发，将我们的应用程序分成更小的部分，我不明白为什么 ComponentA 需要知道 ComponentB 有什么依赖关系才能在其视图中使用它。

我还将证明这只是一个问题，因为我在 ComponentB 中包含了第 3 方指令。如果我删除指令，一切正常。例如，如果我改为这样做：

<ul>
    <li *ngFor="let node of nodes">
        {{ node.name }}
    </li>
</ul>

应用程序运行良好，没有错误。

我做错了什么，我应该做些什么不同的事情？如果解决方案是向 ComponentA 添加导入，我会接受作为答案，给出一个很好的解释（例如为什么 *ngFor 有效但 tree-root 指令无效）。

【问题讨论】：

定义组件的属性
您可以将第 3 方的模块添加到父模块中。然后你就会拥有它，不是吗？
是否有什么东西阻止你在功能 b 模块中导入第三方模块？
" ComponentA 不依赖于这个模块" --> 确实如此，moduleA 声明了componentB。实际上，您的整个代码结构非常奇怪。例如，为什么要在 ModuleA 和 ModuleB 中声明 ComponentB ？这没有意义。
感谢 cmets。我已经编辑了我的帖子以包含更多细节。

标签： angular typescript

【解决方案1】：

我回到起点，意识到我错过了什么：

在feature-b.module.ts 我应该已经导出了组件：

exports: [
    FeatureBComponent
]

我还需要导入FeatureBModule 而不是FeatureBComponent。

~~import { FeatureBComponent } from '../feature-b/feature-b.component';~~

import { FeatureBModule } from '../feature-b/feature-b.module';

【讨论】：

感谢您的简单而恰当的回答。

【解决方案2】：

我能够通过完全删除 FeatureBModule 来运行应用程序。然后 FeatureAModule 是正确的，因为它需要 delcare FeatureBComponent。

FeatureAModule 如下所示：

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';

import { FeatureAComponent }           from './feature-a.component';
import { FeatureARoutingModule }       from './feature-a-routing.module';
import { TreeModule }                  from 'angular-tree-component';

import { FeatureBComponent } from '../feature-b/feature-b.component';

@NgModule({
  imports: [
    CommonModule,
    FeatureARoutingModule,
    TreeModule
  ],
  declarations: [
    FeatureAComponent,
    FeatureBComponent
  ]
})
export class FeatureAModule {}

我在这里更新了 plunker：https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview

【讨论】：

感谢您的建议。我已经更新了我的帖子，以包含更多信息和原因，说明我为什么对事情没有按预期工作感到困惑。我正在寻找为什么父组件需要导入子组件的所有模块的原因。
Angular 中有两个import。一种是 ES 2015 模块所需的导入语句。还有一个是 Angular 模块所需的导入数组。当你在上面说import all modules时，你指的是哪个？
Angular 模块，如import { TreeModule } from 'angular-tree-component';

【解决方案3】：

您可以在绑定到附加指令本身的属性的指令上出现此错误，但相应的 Input 修饰不正确。

@Directive({ selector: '[myDirective]' })
export class MyDirective {
    @Input('mydirectiveSpelledDifferently') data: any;
}

示例中的输入有"mydirectiveSpelledDifferently"，但它应该与选择器匹配（即"myDirective"）。

当它以这种方式工作时，你会知道这是你的问题：

<div myDirective>

但是这样失败了：

<div [myDirective]="something">

工作案例正确地找到了您为指令选择的选择器。失败的案例正在寻找 @Input() 装饰并且失败了，因为它在您的指令中不存在 @Input('myDirective')。

【讨论】：

【解决方案4】：

我也遇到了同样的情况，问题是我的组件大小写错误（'a' vs 'A'）。

在我的父组件的模板中，我有：

<mychild-component></mychild-component>

代替

<myChild-component></myChild-component>

【讨论】：

【解决方案5】：

与 MMalke 有类似的情况。默认情况下，当通过命令行界面生成组件时，Angular 会将前缀 app- 添加到组件的选择器名称中。我应该写<app-my-component><app-my-component>，但我写了<my-component><my-component>。仅供参考，请检查以确保组件的选择器名称与您的 HTML 中的内容匹配。

【讨论】：