由於它不是'y'的已知屬性，因此無法綁定到'x'

Question

我有一個包含另一個組件內部組件的角網站。我正在使用路由和延遲加載外部組件（ComponentA）。內部組件（ComponentB）依賴於第三方指令。

以下是PoC：https://plnkr.co/edit/7maVz2vO9LKTli47hyWl?p=info（打開控制檯查看錯誤）。

在ComponentB中使用第三方指令時出現錯誤。這不是指令本身的錯誤，而是我如何構建代碼的錯誤。

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

不能綁定到「節點」，因爲它是不是「樹根」已知屬性

我可以通過導入第三方模塊解決這個問題ComponentA，但是由於ComponentA不依賴於這個模塊，所以這樣做感覺不對。

我創建的Plunker是我的應用程序的一小部分，旨在隔離此問題。這是爲了展示一個概念，而不是作爲一個應用程序的意義。我想要實現的是創建一個可以添加到我的任何頁面的組件。該組件可以是一個小部件或其他東西，添加到一個或多個父頁面。它是獨立的。

我對Angular的有限知識已經開始在這裏展示。由於組件應該允許我們執行基於組件的開發，將我們的應用程序分解爲更小的部分，我不明白爲什麼ComponentA需要知道ComponentB具有哪些依賴關係才能在其視圖中使用它。

我還會證明這只是一個問題，因爲我在ComponentB中包含第三方指令。如果我刪除該指令，所有作品。例如，如果我做了這樣的代替：

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

該應用程序運行正常，沒有錯誤。

我做了什麼錯，我應該做什麼不同？如果解決方案是向ComponentA添加一個導入，我會接受這個答案，因爲提供了一個很好的解釋（例如爲什麼* ngFor有效，但是樹根指令沒有）。

Answer 1

我又回到了起點，實現什麼我錯過：

在feature-b.module.ts我應該有導出組件：

exports: [ 
    FeatureBComponent 
] 

我也有必要導入FeatureBModule而不是FeatureBComponent。

從'../feature-b/feature-b'導入{FeatureBComponent}。零件';

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

Answer 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