在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文件中引導角度組件

回答

相關問題