在不调用根组件的情况下调用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组件

回答

相关问题