Bootstrap Angular5 组件，所以根不一定是 <app-root>

Question

我有一个 Angular 5 项目，我想使其基于组件。使用像 Stencil 这样的框架，我可以简单地制作我的组件并在我想要的任何页面上执行此操作：

<script src="~/stencil/www/build/app.js"></script>
<my-custom-component></my-custom-component>

就是这样。在 Angular 我必须做这样的事情：

<base href="/angular/dist/">
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

这很好用，虽然我希望只有一个 <script> 元素，但这并不重要。问题是，这不一定是基于组件的。我不想加载 <app-root>，因为我宁愿加载 <my-custom-element>。 <app-root> 不知道要加载哪个组件，因为我没有使用内置 Angular 路由。

我可以让 <my-custom-element> 在 Angular 中完美工作，如果我打开 app.modules.ts 并将 bootstrap 更改为：

@NgModule({
    declarations: [AppComponent, MyCustomComponent],
    bootstrap: [AppComponent]
})

对此：

@NgModule({
    declarations: [AppComponent, MyCustomComponent],
    bootstrap: [MyCustomComponent]
})

但是它只适用于我的自定义组件。如果我有多个元素，例如 <my-second-custom-component>，此解决方案不起作用。

是否可以让任何组件作为 root 工作，这样我就可以对所有脚本执行上述操作并调用我的自定义组件，仅此而已？

Answer 1

为了回答我自己的问题，这在 Angular 5 中是可能的，只需在其他组件文件旁边添加一个 componentname.module.ts 文件即可。然后我简单地添加了 app.module.ts 中的代码，如下所示：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { CustomComponent } from "./customcomponent.component";
import { CustomService } from "../services/CustomService";

@NgModule({
    declarations: [CustomComponent],
    imports: [BrowserModule],
    providers: [CustomService],
    bootstrap: [CustomComponent]
})
export class CustomModule {}

然后在 main.ts 里面我可以添加这一行：

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

这让我可以在我的应用程序中简单地执行此操作：

<body>
    <custom-component></custom-component>
</body>

就是这样。哦，当然包括捆绑脚本。我什至可以从我的 app.module.ts 文件中删除我的自定义组件，所以它真的对组件一无所知。

完美运行！

Bootstrap Angular5 组件，所以根不一定是 <app-root>

Bootstrap Angular5 components, so the root isn't <app-root> necessarily

angular-components

angular