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. MTSP问题

    问题描述:m个旅行商去旅游 n个城市,规定都必须从同一个出发点出发,而且返回原出发点,需要将所有的城市遍历完毕,每个城市只能游历一次,但是为了路径最短可以路过这个城市多次.这个就是多旅行商问题.是在T ...

  2. 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 ...

  3. 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 ...

  4. <c:if >标签的坑!!

    <c:if test="${trans.Transition}"> <input id="${trans.nextnode}" type=&q ...

  5. 树状数组 hdu2689 hdu2838

    题意:给定一个正整数n,和一个1-n的一个排列,每个数可以和旁边的两个数的任意一个交换,每交换一次总次数就要加一,问将这个排列转换成一个递增的排列需要多少次交换? 题意可以转换成求这个排列的逆序对数. ...

  6. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  7. [LC] 168. Excel Sheet Column Title

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...

  8. eclipse 大括号改为C语言一样的代码块

    如图:找到Windows->Preferences->Java->Code Style->Formatter: 然后,点击右边的Edit按钮: 按如下图完成

  9. tomcat启动后access error[730048]的解决方法

    安装了JDK... 配置了系统变量... 解压了tomcat... 配置了系统变量... 点击startup.bat启动了以后,打开浏览器,出现access error 404错误. 仔细看过控制台输 ...

  10. C++如何保留2位小数输出

    cout<<setiosflags(ios::);//需要头文件#include <iomanip> 然后再输出实数类型变量即可以保留2位小数输出了,当然你要保留三位小数,se ...