在不调用根组件的情况下调用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>
任何想法?
您的解决方案很好,但我需要使用相同的应用程序代码才能执行我需要的任何组件。
我假设你的项目是由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>
我找到了解决办法:
使用的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
感谢你的努力的家伙!
您是否实现了角度路由器? – CruelEngine
@CruelEngine是的,我有。 –
你想加载基于url的组件? – CruelEngine