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>并从中更改app.modules.ts，我可以完美地使用bootstrap在Angular中工作：

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

到此：

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

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

是否可以将任何组件作为根目录，因此我可以使用所有脚本执行上述操作并只调用我的自定义组件，那就是它？

Answer 1

要回答我自己的问题，只需在其他组件文件旁边添加componentname.module.ts文件，就可以在Angular 5中实现。然后我简单地添加了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组件，因此root不是<app-root>必需

1 个答案: