Question

我开始学习angular2，我想要一个带有图片的标题。

这是我的heading.component.html

Type: int       int     string
Row: 1  1       2016-05-06 20:41:06

Type: int       int     string
Row: 2  2       2016-05-06 20:41:35

json.MarshalIndent:
[
 {
  "IdOrder": 1,
  "Uid": 1,
  "Changed": "2016-05-06 20:41:06"
 },
 {
  "IdOrder": 2,
  "Uid": 2,
  "Changed": "2016-05-06 20:41:35"
 }
]

这是我的heading.component.ts

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

这是我的app.component.ts

import {Component} from 'angular2/core';

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

浏览器中没有显示任何内容。你能告诉我如何展示图像吗？感谢

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

使用templateUrl在div中显示图像

1 个答案: