在angular2模板中使用templateUrl

Question

我剛開始學習Angular2，並堅持在一個點，其中我需要結合2個組件。

這裏是我的app.component.ts

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

    @Component({ 
    selector: 'app-root', 
    template: './app.component.html <app-home></app-home>', 
    styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     mylogo = 'ABC Engineering'; 
     headlist = ["Home", "About", "Portfolio", "Pricing", "Contact"]; 
     technology = ["HTML", "CSS", "JavaScript", "jQuery", "AngularJS", "PHP"]; 
    } 

這裏是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { AboutComponent } from './about/about.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    AboutComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 

    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

它使輸出顯示的形象。

它沒有顯示app.component.html的輸出！但它確實顯示了'home.component.html'的內容。 如何解決它以顯示'app.component.html'中的內容？

Answer 1

您可以使用

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
    }) 

或

@Component({ 
    selector: 'app-root', 
    template: '<app-home></app-home>', 
    styleUrls: ['./app.component.css'] 
    }) 

但不能同時單個組件內組合或混合。