css - 使用 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。所以将其添加到组件的指令列表中。