HTML文件中的Bootstrap Angular组件-Java 学习之路

我在Django的前端使用Angular . 请注意，我不使用Angular for SPA，而是使用Django来提供模板 . 问题是我需要在模板中注入一些角度组件，但我可以看到我只能引导一个根模块 .

这是我的 app.module.ts ：

@NgModule({
  declarations: [
    ContactComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [ContactComponent, AboutComponent]
})

我想在 contact.html 中注入ContactComponent <contact></contact> ，在 about.html 中注入AboutComponent <about></about> .

在ng-build之后我得到以下错误：

选择器"contact"与 about.html 中的任何元素（...）都不匹配选择器"about"与 contact.html 中的任何元素（...）都不匹配

我怎样才能实现这一点，导出角度组件并在html文件中使用它 . 也许Angular仅适用于SPA，或者我遗漏了一些东西 .

我在我的项目中使用Angular版本4，它是通过 angular-cli 生成的（不再使用SystemJS） .

1 回答

0
你正在做的是编程术语 . 您可以使用声明元数据来引导多个模块 . 所以你的错误不会因为你显示的代码而出现 . 您应该检查导入，到达和选择器 . 无论如何 .

引导一个唯一的根组件的意义是一个协议，它给模块化更多的意义 . 您还有其他一些方法来引导多个模块

如果你的模块的感觉更像是一个单独的应用程序，你可以用它们的 main.ts 做引导程序（每一个）main.ts
```
import {bootstrap}    from '@angular2/platform/browser'
import {FirstComponent} from './my-first.component'

bootstrap(FirstComponent);
```
然后导入HTML .
```
System.import('first/main').then(null, console.error.bind(console));
 System.import('second/main').then(null, console.error.bind(console));
```
如果感觉要作为“包”，你可以有一个主模块，充当桶，帮助器或你想如何命名它 . 它导入您的模块
```
@NgModule({
  declarations: [First],
  exports: [First]
})
export class FirstModule

@NgModule({
  declarations: [Second],
  exports: [Second]
})
export class SecondModule

@NgModule({
 imports: [FirstModule, SecondModule],
 exports: [FirstModule, SecondModule]
})
export class BarrelModule
```
当您需要所有模块时，可以使用此模块 .
回复于 2024-04-29T23:37:22+08:00

HTML文件中的Bootstrap Angular组件

1 回答

相关问题