angular2의 템플릿 내에서 templateUrl 사용하기

Question

저는 방금 Angular2를 배우기 시작했고 2 개의 구성 요소를 결합해야하는 시점에 갇혀 있습니다.

여기 여기서 이미지에 도시 된 바와 같이 출력을 제공 내 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.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.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'] 
    }) 

하지만이 하나의 구성 요소에서 모두 결합 또는 혼합하여 사용 할 수 있습니다.