作者：心叶
时间：2018-07-24 16:41

基本说明

组件是Angular中非常重要的一个东西，是拥有模板的指令，是构成Angular应用的基础和核心，被用来包装特定的功能，应用程序的有序运行依赖于组件之间的协同工作。

自定义组件

假如现在有一列数据，需要使用ul和li标签显示出来，可以自定义一个名称为ui-show标签，组件代码如下（代码位于show.component.ts）：

import { Component } from '@angular/core';@Component({selector: 'ui-show',template: '<ul><li *ngFor="let row of dataList">ID:{{row.id}}  INFO:{{row.info}}</li></ul>',styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]})
export class ShowComponent {dataList = [{ id: 1, info: "Angular" },{ id: 2, info: "React" },{ id: 3, info: "Vue" }];}

此时，组件已经定义完成，为了可以使用，你需要在模块（比如根模块app.module.ts）中引入，如下（去掉了一些不需要说明的代码）：

import { NgModule } from '@angular/core';import { ShowComponent } from './show.component';@NgModule({declarations: [ShowComponent]})
......

现在，你可以使用标签ui-show来显示那些数据了。

template和templateUrl选项

html模板除了上面例子中直接写在组件文件中，还可以这样：

templateUrl:'./show.component.html'

这样，具体的模板在.html文件中开发，更容易维护，如果模板比较复杂的话。

styles和styleUrls选项

样式文件也一样，除了上面使用styles选项直接写在组件文件中以外，还可以这样：

styleUrls:['./show.component.css']

这样，在.css文件中开发样式就比较容易书写了。

上面三个是常见的选项，比较简单也比较常用，除此之外，还有很多选项可以选择，后续再说明。

生命周期钩子

组件（当然包括指令）的实例有一个生命周期，Angular提供了钩子可以让开发者在需要的时期触发预先定义的方法，称为生命周期钩子接口。下面展示了这些钩子的顺序：

需要注意的是，你不需要全部实现这些钩子的方法，而且这些钩子也不是总有效，有的只有在组件中定义才有意义。

如何使用？

比如要使用ngOnInit()这个钩子，在初始化的时候处理一些东西，可以这样：

......export class ShowComponent implements OnInit{......ngOnInit() {//todo}}

Angular系列学习二：基本的组件说明、自定义组件和部分细节说明相关推荐

form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
小程序制作自定义弹层添加弹层显示和隐藏动画父组件与子组件（自定义组件）之间传值
0.说明与效果本文打算用一个具体的例子,总结下这些开发过程中学习到的知识: 1.制作自定义组件,并在页面中引用 2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画 3.展示父组件与子组 ...
小程序-实现自定义组件以及自定义组件间的通信
前言对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的页面的显示view层与逻辑层是通过data进行绑定关联,若需要更改页面中的数据,则通过setDat ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
【Android 应用开发】自定义组件宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
android 使用自定义组件,Android自定义组件开发之onMeasure使用
一.自定义组件造成其他组件的隐藏我们在开发过程中往往现有的组件无法满足我们的需求,所有我们需要去自定义组件来实现我们的需求,在实现的过程中总会有各种问题,这里我们讨论一下onMeasure的使用,首 ...
25000字总结Android优秀的第三方框架、各种学习资料汇集一系统组件、Design组件、自定义组件等等
说明以下内容博主很多也没有用过分享出来大家一起学习用到的时候可以来查看有问题可以沟通希望大家不要污染了学习环境如果觉得有帮助点个赞支持一下系统控件 TextView Github ...
Flutter4-抽离组件，自定义组件
自定义组件就一个类,需要继承StatelessWidget/StatefuleWidget,初期都是前者 StatelessWidget是无状态组件,在生命周期状态不可变,后者可变快捷键: impo ...
django中的admin组件之自定义组件的增删改查的完善
昨天我们将自定义列放在类我们自定义的Bookconfig配置类内,但是这样就写死了,因为当我们访问publish表的时候应该也有这样的自定义列,所以我们应该将我们的自定义列放在默认的配置表里面.应该怎 ...

Angular系列学习二：基本的组件说明、自定义组件和部分细节说明