angular - 在不调用根组件的情况下调用 Angular 组件

Question

我已经构建了一个 Angular 应用程序，以便在正常工作的 tomcat 生产环境中使用。

但是，每次我在 jsp 页面中使用 Angular 组件时，我都必须先加载 app-root。

有没有办法不通过根组件直接调用Angular中的特定组件？

App-Root - 商店组件 - 购物车组件 - Calc - 发票

例如:<cart></cart>

已更新@米娜迈克尔

您的回答有效!但这并不是我想要的(也许我没有采取正确的方法。)我有两个不同的模块，每个模块都有一个 Bootstrap 组件。

在我的 main.ts 中

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

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

在我的 index.html 中我有两个，这有效!但是如果我停止应用程序并执行“npm start 或 npm build”，它会崩溃并显示 Bootstrap 错误...不知道为什么

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

有什么想法吗？

您的解决方案很好，但我需要使用相同的应用程序代码来执行我需要的任何组件。

Answer 1

我假设您的项目是由 angular-cli 生成的，并且文件遵循标准名称。

在index.html替换 <app-root></app-root>通过 <cart></cart>

---

在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>