我有一个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>
,则此解决方案不起作用。
是否可以将任何组件作为根目录,因此我可以使用所有脚本执行上述操作并只调用我的自定义组件,那就是它?
答案 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
文件中删除我的自定义组件,因此它对组件一无所知。
完美无瑕地工作!