2017-04-17 68 views
1

我有主要組件,其模板是另一個組件。我想知道是否可以在一個模板中有兩個組件,都可以顯示。例如,我創建了一個包含導航的組件,另一個包含body。由於我需要導航以保持所有其他頁面的一致,因此我爲它製作了一個組件。我該如何解決這個問題?它甚至有可能嗎?一個模板中的多個組件

import { Component } from '@angular/core'; 

@Component({ 
moduleId: module.id, 
selector: 'my-app', 
template: ` 
<firstComponent></firstComponent> 
<secondComponent></secondComponent> 
` 
}) 
export class AppComponent { 

} 

回答

1

可以通過讓它們作爲兩個單獨的組件並將其添加到陣列申報相應模塊的

import { Component } from '@angular/core'; 

@Component({ 
selector: 'firstComponent', 
template: ` 
     .................. 
` 
}) 
export class FirstComponent { 

} 

Second component 
import { Component } from '@angular/core'; 

@Component({ 
selector: 'secondComponent', 
template: ` 
     .................. 
` 
}) 
export class SecondComponent { 

} 


export class AppModule { 

declarations:[AppComponent,FirstComponent,SecondComponent] 
+0

我已經將我的所有組件的聲明這樣做數組在AppModule中,將它們作爲兩個獨立的組件。現在我不知道如何將它們作爲模板放在我的AppComponent中,以便兩者同時顯示。 –

+0

你以前的AppComponent的模板將把這兩個組件放到一個視圖中,如預期的那樣 – Aravind

+0

@PegasusThorn在這裏看到plunker:https://embed.plnkr.co/0fKIWJTofxz9Z4dN0Ljk/ – unitario