使用templateUrl與圖像顯示div

Question

我開始學習angular2，我想要一個帶有圖片的標題。

這裏是我的heading.component.html

<div class="heading"> 
    <img src="../images/header.jpg"/> 
</div> 

這裏是我的heading.component.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'header', 
    templateUrl: './heading.component.html', 
    styleUrls: ['../style.css'] 
}) 
export class HeadingComponent { } 

，這裏是我的app.component.ts

import {Component} from 'angular2/core'; 
import {HeadingComponent} from './heading.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <header>fgsdgf</header> 
    `, 
    styleUrls: ['../style.css'] 
}) 
export class AppComponent { } 

瀏覽器中沒有顯示任何內容。你能給我一個關於如何顯示圖像的想法嗎？由於

Answer 1

使用此代碼更改app.component.ts： -

import {Component} from 'angular2/core'; 
import {HeadingComponent} from './heading.component'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <header>fgsdgf</header> 
    `, 
    styleUrls: ['../style.css'], 
    directives: [HeadingComponent] 
}) 
export class AppComponent { } 

你需要使用它之前添加的指令列表中header。所以將其添加到組件的指令列表中。