Angular2 基础实践（ 二 ）- 创建一个简单的组件（含视频）

2024年2月3日 136次阅读 来源: dreday

组件介绍

Angular1 并没有使用组件，受react影响，Angular2引入了组件。

Angular2的组件是这样的：你可以自定义html标签，比如simple-form组件(形如<simple-form></simple-form>)。

Angular2组件基础三部分组成：tmplate模板(对应html)，组件的class部分(js，逻辑)，style样式(css)。

Angular2的定义组件的步骤：从’@angular /core’模块引入Component，然后@Component()函数传入一个Object，并且紧跟一个class就可以定义一个组件了，形如：

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

@Component({
  selector: 'simple-form',// 这边是组件的标签名，对应<simple-form></simple-form>
  templateUrl: './simple-form.component.html',// 这边定义了模板文件的位置
  styleUrls: ['./simple-form.component.css']// 这边定义了的样式
})
export class SimpleFormComponent {
  // 这边要紧跟一个class组件才算完整，class里面写逻辑
}

angular2组件中定义的样式只对该组件有效，父子组件都无效(可能是没有父子组件这种概念，注意别被我误导)。web前端开发现在有组件化的趋势，react甚至想把组件化带到iOS，android(react-native)。本人使用组件化的体验: 没了之前写mvc的纠结(创建class要先想想这是model，还是view，还是controller，而且这种纠结并没让我感到提升了代码质量)。

下面是一个创建组件的视频，跟着这个视频我们会创建第一个自己的component(组件)，视频中使用了angular-cli(angular命令行工具 )创建组件，注意到命令后面加了inline style和inline template，默认的命令会把css，html分出去成为单独的文件，加了这俩会整合成在一个ts文件内，这一点跟上面的代码不同，视频中的template和style会和class在一个ts文件中。

视频链接-腾讯精品课

plnkr链接，可以在这里测试一下代码

视频中的名词注释

angular-cli.json: 这个文件是angular-cli的配置文件，使用angular-cli开发angular2非常方便，推荐使用。

    原文作者：dreday
    原文地址: https://segmentfault.com/a/1190000007486472
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞