如何在index.html文件中包含ts组件



如何在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>
...

最新更新