Verwendung von templateUrl in der Anzeige div mit Bild

Question

Ich beginne zu early2 lernen, und ich möchte eine Überschrift mit einem Bild darauf haben.

Hier ist meine heading.component.html

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

Hier ist mein heading.component.ts

import {Component} from 'angular2/core'; 

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

und hier meine app.component.ts ist

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

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

Im Browser wird nichts angezeigt. Kannst du mir eine Idee geben, wie ich das Bild zeigen kann? Dank

Answer 1

Ihre app.component.ts mit diesem Code ändern: -

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 { } 

müssen Sie die header in der Richtlinien-Liste hinzufügen, bevor es zu benutzen. Fügen Sie das also in die Liste der Direktiven Ihrer Komponente ein.