无法绑定到"x"，因为它不是"y"的已知属性 [英] Can't bind to 'x' since it isn't a known property of 'y'

问题描述

我有一个角形位点，该角位在另一个组件内包含一个组件.我正在使用路由和延迟加载外部组件(ComponentA).内部组件(ComponentB)取决于第三方指令.

这是概念验证(打开控制台以查看错误)./p>

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

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

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

我可以通过在ComponentA中导入第3方模块来解决此问题，但是由于ComponentA不依赖于此模块，因此这样做是错误的.

我创建的Plunker仅占我应用程序的一小部分，旨在隔离问题.这是为了演示一个概念，而不是使它成为一个应用程序.我要实现的目标是创建一个可以添加到我的任何页面的组件.该组件可以是添加到一个或多个父页面的窗口小部件或其他东西.它是独立的.

我在Angular的有限知识开始在这里显示.由于组件应该允许我们进行基于组件的开发，从而将应用程序分解为较小的部分，所以我不明白为什么ComponentA需要知道ComponentB拥有哪些依赖关系才能在其视图中使用它.

我还将演示这仅是一个问题，因为我在ComponentB中包含了一个第三方指令.如果我删除该指令，所有的工作.例如，如果我改为执行以下操作:

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

应用正常运行，没有错误.

我做错了什么，我应该做些什么?如果解决方案是将导入添加到ComponentA，我将接受此答案，并提供了很好的解释(例如，为什么*ngFor起作用而tree-root指令不起作用).

解决方案

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

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

exports: [
    FeatureBComponent
]

我也有必要导入FeatureBModule而不是FeatureBComponent.

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

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

I have an angular site that contains a component inside another component. I'm using routing and lazy loading the outer component (ComponentA). The inner component (ComponentB) depends on a 3rd party directive.

Here's the proof of concept (open the console to see the error).

I'm getting an error when using the 3rd party directive inside ComponentB. This isn't an error with the directive itself but an error with how I've structured my code.

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

Can't bind to 'nodes' since it isn't a known property of 'tree-root'

I can solve this issue by importing the 3rd party module in the ComponentA but since ComponentA doesn't depend on this module, it feels wrong to do so.

The Plunker I have created is a very small portion of my app, designed to isolate the issue. It's to demonstrate a concept, not to make sense as an app. What I'm trying to achieve is to create a component that can be added to any of my pages. This component could be a widget or something, added to one or more parent pages. It is self contained.

My limited knowledge in Angular is starting showing here. Since components are supposed to allow us to do component based development breaking our application into smaller parts, I don't understand why ComponentA needs to know what dependencies ComponentB has in order to use it in its view.

I'll also demonstrate that this is only an issue because I have a 3rd party directive included in ComponentB. If I remove the directive, all works. For example if I did something like this instead:

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

the app runs fine with no errors.

What have I done wrong and what should I be doing differently? If the solution is to add an import to ComponentA, I will accept that as an answer given a good explanation is provided (such as why *ngFor works but the tree-root directive doesn't).

解决方案

I went back to the start and realised what I missed:

In feature-b.module.ts I should have exported the component:

exports: [
    FeatureBComponent
]

It was also necessary for me to import FeatureBModule rather than FeatureBComponent.

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

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

这篇关于无法绑定到"x"，因为它不是"y"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！