angularV4+学习笔记
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的元数据还未完全,所以后面会继续完善。
angularV4+学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- MTSP问题
问题描述:m个旅行商去旅游 n个城市,规定都必须从同一个出发点出发,而且返回原出发点,需要将所有的城市遍历完毕,每个城市只能游历一次,但是为了路径最短可以路过这个城市多次.这个就是多旅行商问题.是在T ...
- 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 ...
- D. Colored Boots(STL)
There are nn left boots and nn right boots. Each boot has a color which is denoted as a lowercase La ...
- <c:if >标签的坑!!
<c:if test="${trans.Transition}"> <input id="${trans.nextnode}" type=&q ...
- 树状数组 hdu2689 hdu2838
题意:给定一个正整数n,和一个1-n的一个排列,每个数可以和旁边的两个数的任意一个交换,每交换一次总次数就要加一,问将这个排列转换成一个递增的排列需要多少次交换? 题意可以转换成求这个排列的逆序对数. ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- [LC] 168. Excel Sheet Column Title
Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...
- eclipse 大括号改为C语言一样的代码块
如图:找到Windows->Preferences->Java->Code Style->Formatter: 然后,点击右边的Edit按钮: 按如下图完成
- tomcat启动后access error[730048]的解决方法
安装了JDK... 配置了系统变量... 解压了tomcat... 配置了系统变量... 点击startup.bat启动了以后,打开浏览器,出现access error 404错误. 仔细看过控制台输 ...
- C++如何保留2位小数输出
cout<<setiosflags(ios::);//需要头文件#include <iomanip> 然后再输出实数类型变量即可以保留2位小数输出了,当然你要保留三位小数,se ...