在不調用根組件的情況下調用Angular組件

我已經構建了一個Angular應用程序，以便在正常工作的Tomcat生產環境中使用。在不調用根組件的情況下調用Angular組件

但是，每次我在我的jsp頁面中使用角度組件時，我都必須首先加載app-root。

有沒有什麼辦法直接調用Angular中的特定組件而不通過根組件？

應用程序根 - 商店組件 - 車部件 - 計算器 - 發票

例如：<cart></cart>

修訂 @Mina邁克爾

你的答案的作品！但這並不是我正在尋找的（也許我沒有采取正確的方法。）我有兩個不同的模塊，每個模塊都有一個引導組件。

在我main.ts

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); 

platformBrowserDynamic().bootstrapModule(CounterModule).catch(err => console.log(err));

在我的index.html都在我，這工作！但是，如果我停止應用程序，並做「NPM啓動或故宮建」崩潰顯示bootrstrapping錯誤...不知道爲什麼

<app-root></app-root> 
<counter></counter>

任何想法？

您的解決方案很好，但我需要使用相同的應用程序代碼才能執行我需要的任何組件。

來源

2017-10-09 Aitor Molina

您是否實現了角度路由器？ – CruelEngine

@CruelEngine是的，我有。 –

你想加載基於url的組件？ – CruelEngine

我假設你的項目是由angular-cli生成的，並且這些文件遵循標準名稱。

在index.html通過<cart></cart>

更換<app-root></app-root>在app.module.ts

1）你會發現進口「AppComponent」

import { AppComponent } from './app.component';

刪除線（或離開它）並導入您的購物車組件。

import {Cart} from './path/to/cart.component';

2）也加上「購物車」，「聲明」。你會發現這樣的：

declarations: [ 
    AppComponent,

使它像這樣：

declarations: [ 
    Cart,

3）也改變這一行

bootstrap: [AppComponent]

是

bootstrap: [Cart]

，並應做到這一點。

另一種更簡單的方法是隻開放app.component.html和地方車存在的，而不是無論是在那裏，就像這樣：

<cart></cart>

來源

2017-10-09 09:58:46

我找到了解決辦法：

使用的WebPack可以specficy多入口點。

在我的情況下，我有兩個模塊AppModule和CounterModule，我想獨立調用它們。

我已經創建counter.ts文件與main.ts並在webpack.common.js文件中引用它們。

現在我可以通過調用app-root或counter標籤來啓動我的應用程序。

來源：

Can your webpack.config file serve multiple entry points?

https://webpack.github.io/docs/multiple-entry-points.html

感謝你的努力的傢伙！

來源

2017-10-10 10:16:36

在不調用根組件的情況下調用Angular組件

回答

相關問題