初识Angular的组件和模板

一、组件

下面是一个最小化的Angular 组件：

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。

1）选择器：上例中，selector: 'hello-world',定义的就是组件的选择器。这里的选择器可以理解为在后面页面中要引用该页面时使用的名字。

2）模板：上例中，

​  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `

定义的就是模板内容，这个内容就是要显示的html内容，除了可以和例子中一样直接写HTML代码外，还可以指定使用的模板文件，然后在模板文件里面编写HTML脚本，如：

templateUrl: './component-overview.component.html',

3）样式：上例中没有定义样式。样式在组件中不声明也是可以的，有需要的时候再进行样式的添加即可。样式的声明同模板一样，可以直接声明，也可以指定样式文件：

二、模板

每个组件都有一个 HTML 模板，用于声明该组件的渲染方式。你可以内联它或用文件路径定义此模板。在组件的例子中，就是使用的内联方法来定义的模板。

angular的模板可以从组件中插入动态值:

import { Component } from '@angular/core';

@Component ({
  selector: 'hello-world-interpolation',
  template: `{{message }}`
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

在该页面用户将会看到 Hello, World!字符。

我们这里先认识下模板的功能主要是将HTML脚本显示出来。其他内容后面再详细了解。