在HTML文件中引导角度组件

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

这是我app.module.ts：

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

我想在contact.html注入ContactComponent <contact></contact>和AboutComponent <about></about>在about.html。

NG-构建之后我获得以下错误：

的选择“接触”并没有匹配任何元素（...）about.html 的选择“关于”没有匹配的元素（...）在contact.html

我该如何做到这一点，导出角度组件并在html文件中使用它。也许Angular仅适用于SPA，或者我错过了一些东西。

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

来源

2017-05-04 Klark

我怀疑你能做到这一点说实话，如果你找到了解决办法，我肯定会在不久的将来给你带来问题。 –

为了这个工作，'Contact'和'About'每个都需要是他们自己的模块，他们不知道也不能相互沟通。 – Claies

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

引导一个唯一的根组件的感觉是一个协议，给模块化更多的意义。和你有一些其他的方式来引导多个模块

如果模块的感觉更像是一个单独的应用程序，你可以与他们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

当你需要所有的模块时，你可以使用这个模块。

来源

2017-05-04 13:44:59 Sam

感谢您的回复，我没有说，但我使用angular-cli生成项目。而角度cli现在不使用SystemJS作为捆绑器，他们切换到webpack，所以我不认为在HTML中导入会工作... – Klark

在HTML文件中引导角度组件

回答

相关问题