【Angular2】理解组件
来源:互联网 发布:2017天天采集软件 编辑:程序博客网 时间:2024/06/05 03:55
概念理解一下Angular组件
组件负责控制屏幕上的一小块区域,我们称之为视图。 —— Angular官方定义
简单来说就是一段可复用html代码,比如标题栏,搜索框,表格……这些代码我们可能会经常用到,所以我们就把它们整片的粘来粘去,在Angular里面,它们就变成了一个组件
如果你需要这个组件,就在自己的网页引入这个组件,然后在html中写上<组件名></组件名>
,这段html就贴过去了
上面简单的说了一下,组件负责控制屏幕上的一小块区域这个意思。
结合代码理解Angular组件
当然,第一次看Angular代码的时候还是有些茫然,知道它在说什么,但是没什么共鸣。
在我们在项目中用命令创建了一个组件之后,一般会为我们的组件创建一个文件夹,其中包括4个文件:html,css,spec.ts,component.ts,其中第1、2个已经很熟了,第3个是测试文件(暂时不用,以后会用),对于开始阶段而言,先关注第4个文件,在这个文件中,我们会对这一小块html代码进行操作。
import { Component } from '@angular/core';//HTML代码 @Component({ selector: 'my-app', template: `<h1>{{title}}</h1> <h2>{{hero}} details!</h2> `})//对html的操作export class AppComponent { title = 'Tour of Heroes'; hero = 'Windstorm';}
这段代码是官网上的,它都没有4个文件,就一个。
因为html代码比较短,就直接写在template后面,如果html和css很多,就单独建立文件,像标准的一个组件文件夹4个文件一样,写在相应的文件中,然后按路径引入就好
通过看这个例子,可以看出,这个组件中的操控的html片段就这么短:<h1>{{title}}</h1><h2>{{hero}} details!</h2>
,一共两行,一个是题目,一个是英雄名字
但是他们是通过{ title = 'Tour of Heroes' ; hero = 'Windstorm';}
这段代码对其赋值的,这个很像是asp网页一样,后面的cs文件对ASP页面的某些值赋值
通过这个简单的demo就可以看出,组件就是这样操作html的,基本的html和css写好,其中关键的需要变动的字段,在component文件中操作
- 【Angular2】理解组件
- 理解angular2.0组件通讯
- angular2 组件
- angular2 组件
- angular2 倒计时组件
- Angular2 倒计时组件
- Angular2自定义分页组件
- Angular2核心组件@Component
- angular2之组件通讯
- 【Angular2】组件交互
- Angular2--组件生命周期
- angular2学习 之 组件
- Angular2核心组件@Component
- Angular2核心组件@Component
- 【Angular2】OnlineExam组件设计
- 【Angular2】Information组件设计
- 【Angular2】AnswerSheet组件设计
- 【Angular2】ExamPaper组件设计
- Surrounded Regions leetcode java
- Ubuntu下vim的配置
- MongoDB可以利用正则表达式进行模糊查询
- keras中文文档笔记12——协助使用Keras
- 使用@RequestMapping 映射请求
- 【Angular2】理解组件
- 此时的我,很迷茫,很尴尬
- 单元测试以及断言类
- 面试大全2
- mybatis ---- 级联查询 一对多 (集合映射)
- NYOJ491幸运三角形
- POJ 2992 Divisors(欧拉素筛+组合数分解)
- C语言TXT文件输出换行
- 七大内部排序算法总结(插入排序、希尔排序、冒泡排序、简单选择排序、快速排序、归并排序、堆排序)