无法绑定到'x',因为它不是'y'的已知属性

Question

我有一个角度站点,其中包含另一个组件内的组件.我正在使用路由和延迟加载外部组件(ComponentA).内部组件(ComponentB)依赖于第三方指令.

这是概念证明(打开控制台以查看错误).

我在ComponentB中使用第三方指令时遇到错误.这不是指令本身的错误,而是我构造代码的错误.

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

无法绑定到'nodes',因为它不是'tree-root'的已知属性

我可以通过在ComponentA中导入第三方模块来解决此问题,但由于ComponentA不依赖于此模块,因此感觉不对.

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

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

我还将证明这只是一个问题,因为我在ComponentB中包含了第三方指令.如果我删除该指令,一切正常.例如,如果我做了类似的事情:

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

该应用程序运行良好,没有错误.

我做错了什么,我应该做些什么？如果解决方案是向ComponentA添加导入,我会接受这个作为答案给出一个很好的解释(例如为什么*ngFor有效,但tree-root指令没有).

Answer 1

我回到起点,意识到我错过了什么:

在feature-b.module.ts我应该导出组件:

exports: [
    FeatureBComponent
]

我也有必要进口FeatureBModule 而不是FeatureBComponent.

从'../feature-b/feature-b.component'导入{FeatureBComponent};

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