角度模塊/組件-單獨顯示還是在另一個模塊/組件內部顯示？

Question

假設我有一個帶有路由器條目的ModuleA ：

path: 'modulea',
loadChildren: './modulea/modulea.module#ModuleA'

ComponentA （ ComponentA的選擇器是component-a ）

帶有以下路由器條目的ModuleB ：

path: 'moduleb',
loadChildren: './moduleb/moduleb.module#ModuleB'

ComponentB （ ComponentB的選擇器是component-b ）

ComponentA的模板具有<div class="component-a">...</div> ，如果我轉到mysite.com/modulea，我會看到我期望看到的所有內容。

但是，我無法讓它像這樣在ComponentB的模板中顯示：

<div class="component-b">
   Do some stuff

   <div class="component-a"></div>

   Do more stuff
</div>

哪種方式對我有意義，因為在那一點上，我感覺我基本上是在重寫ComponentA的模板（即使它由於其他原因而失敗）。

我也不可以得到它，以顯示ComponentA內ComponentB通過切換<div class="component-a"></div>與<component-a></component-a>到它。

我發現與我嘗試做的最接近的是其他組件中的Angular 2組件 。 這看起來很有希望，但是當我嘗試將ComponentA作為指令添加到ComponentB並使用<component-a></component-a> ，它會引發錯誤：“'component-a'不是已知元素...”

TL; DR：

我希望模塊/組件在應用程序中顯示在其自己的頁面上，以及在應用程序中其他位置的另一個模塊/組件中顯示。

Answer 1

您應該從moduleA導出componentA ，以便可以通過在ModuleB導入ModuleA來安全地在componentB使用它。

這樣可以解決您的錯誤

“'component-a'不是一個已知的元素...”

moduleA.module.ts：

@NgModule({
declarations:[ComponentA],
exports:[ComponentA]
})
export class ModuleA{
}

moduleB.module.ts：

@NgModule({
declarations:[ComponentB],
imports:[ModuleA]
})
export class ModuleB{
}

componentB.component.ts

<div class="component-b">
   Do some stuff

   <component-a></component-a>

   Do more stuff
</div>