如何在index.html文件中包含ts组件。我已经找了很长时间了,但没有任何人能提供帮助。
只需使用
bootstrap(MyComponent)
以向CCD_ 1添加组件。组件的选择器需要匹配index.html
中的标签
假设您正在构建angular 2应用程序并希望将组件添加到index.html文件中。
使用组件decorator创建一个类,并确保在decorator中添加selector
属性和模板,并使用angular的核心引导方法以组件名称引导应用程序。
main-component.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component } from "@angular/core"
@Component({
selector: 'root',
template: <div>It works!</div>
})
export class RootComponent{
constructor(){}
}
bootstrap(RootComponent)
index.html
<body>
<root></root>
</body>
bootstrap方法告诉angular如何加载组件,因为angular可以用于开发本地移动应用程序和web应用程序。您可以使用bootstrap方式为特定平台初始化应用程序。
这些答案对我都不起作用。然而,解决方案非常简单。
首先创建组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navigation-bar',
templateUrl: './app-navigation-bar.component.html',
styleUrls: ['./app-navigation-bar.component.css']
})
export class AppNavigationBarComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
}
其次,将组件添加到应用程序引导程序中:
// File: app.module.ts
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
...
],
providers: [],
bootstrap: [AppComponent, AppNavigationBarComponent]
})
export class AppModule { }
第三,使用index.html:中的组件
...
<body>
<app-navigation-bar></app-navigation-bar>
<app-root></app-root>
</body>
...