Bootstrap Angular5组件,因此root不是<app-root>必需

时间:2018-02-19 09:23:58

标签: angular angular-components

我有一个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>,则此解决方案不起作用。

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

1 个答案:

答案 0 :(得分:0)

要回答我自己的问题,只需在其他组件文件旁边添加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文件中删除我的自定义组件,因此它对组件一无所知。

完美无瑕地工作!