angular学习笔记之组件篇

1注解

1.1组件注解

@Component注解,对组件进行配置。

1.1.1注解@Component的元数据
  • selector
  • template/templateUrl
  • inputs/outputs
  • host
  • styleUrls

selector:选择器

页面渲染时,Angular组件匹配的选择器,

使用方式:


<ip-address-form></ip-address-form>

采用html标签的方式。
在《Angular权威教程》中,说明另外一种,<div ip-address></div>,这种规则与选择器匹配规则一致,也可以为class选择器,根据实际场景而用。(在Ideal中引入TSLint后,程序能够正常运行,但是编辑器会警告,并提示消除警告方案)

例如:

@Component({
selector: '.app-single-component',
template: `
<div>
这个是子组件 :{{name}}
<button (click)="sendMessage()" >点我</button>
</div>
`
})

templdate/templdateUrl:模版/模版路径

组件具体的html模版,template为模版,templateUrl为模版的路径。
template中支持es6的反引号,进行多行编写,templdateUrl用于配置html模版的路径。

注意:在Typescript中的构造函数只允许有一个,这也是它与es6的一个区别

inputs/output:输入/输出

组件中的输入与输出,可以理解为,数据输入到组件中,数据从组件中输出到父组件中。

输入使用方式:[变量名],在父元素页面中使用,@Input(),在子组件class中使用,代码例子如下:

single-component.component.ts

@Component({
selector: 'app-single-component',
template: `
<div>
这个是子组件 :{{name}}
</div>
`
})
export class SingleComponentComponent implements OnInit { @Input () name: string ; ngOnInit () {
} }

app.component.ts

@Component({
selector: 'app-root',
template: `
<div>
<app-single-component [name]="simple"></app-single-component>
</div>
`
})
export class AppComponent {
simple: string; constructor () {
this.simple = '我的世界';
}
}

其中input作为@Component的元数据,那么还有另外一种写法,之后的输出也一致

其中一段代码


@Component({
selector: 'app-single-component',
inputs:['name'],
template: `
<div>
这个是子组件 :{{name}}
</div>
`
})

输出使用方式:输出的方式或许用广播/订阅来说更加合适。

single-component.component.ts改

@Component({
selector: 'app-single-component',
template: `
<div>
这个是子组件 :{{name}}
<button (click)="sendMessage()" >点我</button>
</div>
`
})
export class SingleComponentComponent implements OnInit { value: string;
@Input () name: string ;
@Output() emotter: EventEmitter<string>; ngOnInit () {
} constructor () {
this.value = '来源于组件的值';
this.emotter = new EventEmitter<string>();
} sendMessage (): void {
this.emotter.emit(this.value);
} }

app.component.ts改

@Component({
selector: 'app-root',
template: `
<div>
<app-single-component [name]="simple" (emotter)="getComponentData($event)"></app-single-component>
</div>
`
})
export class AppComponent {
simple: string; constructor () {
this.simple = '我的世界';
} getComponentData (message: string): void {
console.log(`获取到子组件中的值:${message}`);
}
}

host:用于在元素行配置元素属性

值为json对象key-value,并且作用只做作用于当前组件内部,常用来添加class.

styleUrls:层叠样式表url,值位数组,可以传多个。

当然必要的,在需要用到的component的模块中引入:


@NgModule({
declarations: [
AppComponent,
SingleComponentComponent // 引入的指令,放在声明里面
],
imports: [
BrowserModule // 引入的模块
],
providers: [],
bootstrap: [AppComponent] //引导应用的根组件
})
export class AppModule { }

关于@component的元数据还未完全,所以后面会继续完善。

源代码git地址

angularV4+学习笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. Python - 使用 xlwt 写入表格

    # -*- coding: utf-8 -*- import xlwt def write_excel(): f = xlwt.Workbook() fenlei = ['一类','二类','三类', ...

  2. 吴裕雄--天生自然python学习笔记:python 用 Open CV抓取脸部图形及保存

    将面部的范围识别出来后,可以对识别出来的部分进行抓取.抓取一张图片中 的部分图形是通过 pillow 包中的 crop 方法来实现的 我们首先学习用 pillow 包来读取图片文件,语法为: 例如,打 ...

  3. D - Association for Control Over Minds Kattis - control (并查集+STL)

    You are the boss of ACM (Association for Control over Minds), an upstanding company with a single go ...

  4. Caused by: java.io.FileNotFoundException: class path resource [../../resources/config/spring.xml] cannot be opened because it does not exist

    在尝试使用Spring的Test的时候遇到了这个错误 原来的代码: @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(loca ...

  5. 源码分析SpringBoot启动

    遇到一个问题,需要从yml文件中读取数据初始化到static的类中.搜索需要实现ApplicationRunner,并在其实现类中把值读出来再set进去.于是乎就想探究一下SpringBoot启动中都 ...

  6. Rx系列---响应式编程

    Rx是ReactiveX的简称,翻译过来就是响应式编程 首先要先理清这么一个问题:Rxjava和我们平时写的程序有什么不同.相信稍微对Rxjava有点认知的朋友都会深深感受到用这种方式写的程序和我们一 ...

  7. 同步linux系统时间

    Linux的时间分为System Clock(系统时间)和Real Time Clock (硬件时间,简称RTC). 系统时间:指当前Linux Kernel中的时间. 硬件时间:主板上有电池供电的时 ...

  8. SRA|GEO|Taxonomy|Pubmed|MeSH|EBI|Uniprot|Human project|Ensembl|UCSC

    生物医学大数据: SRA:Sequence Read Archive (SRA) makes biological sequence data available to the research co ...

  9. 为什么说iPhone无望恢复中国市场?

    直到现在还记得,iPhone 4在国内当时引发的追捧狂潮.彼时iPhone 4绝对是一机难求,上至土豪下至学生都以拥有iPhone 4为荣.发售接近一年后仍然需要加价,价格动辄达到七八千元,真正成为了 ...

  10. XP停止更新不用愁 瑞星XP护盾给你持续保护

    4月8日,微软正式结束了Windows XP的支持,所有XP系统将不会再收到来自微软提供的补丁和安全更新等服务,叱咤OS江湖十几年的一代操作系统终于完美谢幕.但谢幕不等于消失,据相关机构统计,虽然微软 ...