@Input

@Input是用来定义模块的输入的,用来让父模块往子模块传递内容:

@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
    Account Id: {{id}}
  `
})
class BankAccount {
  @Input() bankName: string;
  @Input('account-id') id: string;
  // this property is not bound, and won't be automatically updated by Angular
  normalizedBankName: string;
}
@Component({
  selector: 'app',
  template: `
     < bank-account bank-name=">< bank-account>
  `,
  directives: [BankAccount]
})
class App {}

在这个例子中,父模块是app,子模块是BankAccount, 在app中我们想往子模块里面传递back-name和account-id这两个信息,可以通过property的方式最简单直接,而子模块要接受这个 property就要用@Input来接收。子模块会在BankAccount里面直接接收传递过来的property。传递的方式可以是驼峰法,也可以直接写在input里面,就如
例子里面写的那样。要记住一点的是父模块在引用子模块的时候是用的[]。

@Output

子模块想自定义一些event传递给父模块又该怎么做呢?这时候就要用到@Output了。

@Directive({
  selector: 'interval-dir',
})
class IntervalDir {
  @Output() everySecond = new EventEmitter();
  @Output('everyFiveSeconds') five5Secs = new EventEmitter();
  constructor() {
    setInterval(() => );
    setInterval(() => );
  }
}
@Component({
  selector: 'app',
  template: `
    < interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
    < /interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}

因为在普通的html里面,比如button我们会有onclick这种event来监听这个button是否被按了,然后angular2也完全允许我们自定义这种event listening的模式,我们可以给任何模块定义这种event,当触发了event之后就会从子模块往父模块传递子模块的信息。

再这个例子里,父模块是app,子模块是IntervalDir, 然后在子模块定义event触发的条件,比如每隔1s要触发事件,每隔5s要触发事件。然后当父模块监听到这些事件时可以做相应的操作。当然我们如果想传递信息,可以在new EventEmitter()里面加入我们想要传递的东西,然后在使用的时候加入函数的参数里面。比如我们想传递一个
test,我们只需要这么改:

class IntervalDir {
  @Output() everySecond = new EventEmitter(test);
}
< interval-dir (every-second)="everySecond(test)" (every-five-seconds)="everyFiveSeconds()">
everySecond(test) { console.log(test); }

而在这里,父模块在引用子模块的时候是用的()。

[(ngModel)]

最后当然是最经典的angular特有的ngModel双向binding了。而这个特性是< input >特有的。我们注意到了 [(ngModel)] 既有[]也有()。没错它既有Input的特性也有Output的特性。

< input [(ngModel)]="hero.name" placeholder="name" > 

directives

主要是加入子模块的模块,当我们定义了一个模块之后,如果我们想要它被别的模块使用,必须定义一个出口被别的模块使用,比如app.component这个模块最后就要:

export class AppComponent {} 

让angular2知道它是一个AppComponent模块,然后在boot里面可以加入这个模块。同理我也export了HeroComponent,HeroFormComponent以及HeroesListComponent模块。然后在app.component的一开始就import进来,然后就要在directive加入这些模块然后在template才能识别相应的selector。如果
不在directive中引入相应的模块,那在compile的时候template就不知道相应的selector是啥就不能正常的render了。

providers

这个主要用来加入service的模块。当我们想在模块之中使用service的时候,和directive相同的道理,我们需要加入provider这样这个模块就知道使用的service的provider。小G在用angular的过程中碰到最多的问题就是missing provider的问题,在angular1中可能是由于service的dependency之间有loop,
表示service互相依赖,会有问题。但angular2由于模块化了这个dependency injection的问题得到了很好的解决。如果再碰到这类问题首先要检查模块是否加入了service provider。

styles

这个主要定义这个模块使用的css,不用放到外部的style.css里面。这样这个模块的css完全由自己掌控,是不是方便了很多?

< li *ngFor="#hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    < span class="badge">{{hero.id}}< /span> {{hero.name}}
< /li >

在html里面用ngFor来循环这个list然后把list里面的英雄输出到html里面。在这里的语法和angular1完全不一样了。在angular1里面,完全没有以及#的符号,但是在angular2里面,和#确实很关键的语法。
( )这个在ngFor的前缀表示整个< li >元素以及它的子元素合成一个master模板。如果不想使用( ),ngFor需要被包含在一个template的元素里面:

< template ngFor #hero [ngForOf]="heroes" >
  < hero-detail [hero]="hero" >< /hero-detail >
< /template >

Angular2还有这个语法的就是ngIf。如果不用()也需要把ngIf包含在template里面。

AngularJS2学习的更多相关文章

  1. Angularjs2 学习笔记

    angularjs2 学习笔记(一) 开发环境搭建   开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装nod ...

  2. angularjs2 学习笔记(一) 开发环境搭建

    开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装node.js(https://nodejs.org/en/) ...

  3. angularjs2 学习笔记(五) http服务

    angular2的http服务是用于从后台程序获取或更新数据的一种机制,通常情况我们需要将与后台交换数据的模块做出angular服务,利用http获取更新后台数据,angular使用http的get或 ...

  4. AngularJs2 学习之路-笔记1-Atscript Ts ES6包含关系

    Atscript 这门新的语言是由谷歌的Angular团队弄出来的 就是为了编写ng2.0 ng2是个极具前瞻性的尝试 这种激进的革新在于对未来标准的迎合 ng2的标准包括了如下:1 module 2 ...

  5. angularjs2 学习笔记(六) Form

    Angular 2 Form表单 在angular2 form表单中我们需要了解表单数据绑定.数据验证.数据提交等内容,在下面的示例中并没有实际提交到后台,这部分内容在今后webapi中加以练习. 表 ...

  6. angularjs2 学习笔记(三) 服务

    在anglar2中服务是什么? 如果在项目中有一段代码是很多组件都要使用的,那么最好的方式就是把它做成服务. 服务是一种在组件中共享功能的机制,当我们使用标签将多个组件组合在一起时我们需要操作一些数据 ...

  7. angularjs2 学习笔记(四) 路由

    angular2路由是管理angular2应用内部导航的一个重要内容,在angular应用中,很多的组件是通过组合完成一个复杂的应用,不可避免的是我们常会在视图间切换,那么这是就需要使用路由来管理视图 ...

  8. angularjs2 学习笔记(二) 组件

    angular2 组件 首先了解angular2 组件的含义 angular2的应用就是一系列组件的集合 我们需要创建可复用的组件供多个组件重复使用 组件是嵌套的,实际应用中组件是相互嵌套使用的 组件 ...

  9. NG2入门 - 架构

    AngularJS2 学习 继TypeScript之后,终于到了ng2的学习路程,同样学习根据angular官网文档进行,对文档中的内容根据自己的理解略有改动.看官可看官网文档,也可以看本系列博文 首 ...

随机推荐

  1. bzoj 1925 [Sdoi2010]地精部落(DP)

    Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...

  2. cloudstack安装篇2-主机名配置

    CloudStack要求正确配置主机名.在默认情况下,安装完操作系统后,主机名是localhost.localdomain.运行下面的命令来测试: hostname --fqdn 在此处将返回这样的结 ...

  3. 利用JDBC连接Eclipse和mySQL5.1.26数据库

    初学JDBC,看了看书,自己动手的时候还是有很多地方有问题,最终终于解决了实现了数据库的连接.现将整个步骤描述如下: 环境:mySQL5.1.26(win 32bit), Eclipse JavaEE ...

  4. Eclipse创建Maven Web项目 + 测试覆盖率 + 常见问题(2015.07.14——湛耀)

    Eclipse创建Maven web项目: 到此,并没有创建好,接下来一步步解决问题: 问题:无法创建src/main/java目录 解决: 右键项目选择[properties] 点击[OK] 问题: ...

  5. python 实战

    用Python写一个真正的Web App! 目标 我们设定的实战目标是一个Blog网站,包含日志.用户和评论3大部分. 比如webpy.org上就提供了一个Blog的例子,目测也就100行代码. 我们 ...

  6. Fast特征检测

    一.Fast算法 1.基本原理 Fast特征点检测feature2D原理是在圆周上按顺时针方向从1到16的顺序对圆周像素点进行编号.如果在圆周上有N个连续的像素的亮度都比圆心像素的亮度Ip加上阈值t还 ...

  7. SQLite 入门教程(二)创建、修改、删除表 (转)

    转于 SQLite 入门教程(二)创建.修改.删除表 一.数据库定义语言 DDL 在关系型数据库中,数据库中的表 Table.视图 View.索引 Index.关系 Relationship 和触发器 ...

  8. oracle 表空管理方式(LMT)、ASSM段管理方式、一级位图块、二级位图块、三级位图块。

    今天是2013-12-16,今天和明天是我学习oracle生涯中一个特殊的日子.今天晚上进行了一下表空间管理方式的学习,在此记录一下笔记. 对于oracle数据库最小i/0单位是数据块,最想分配空间单 ...

  9. SVN eclipse插件错误

    部分文章转载自:http://www.bkjia.com/ASPjc/1015687.html 出现如下问题该怎么做: 1.在Windows--Preferences--Team--SVN--接口换成 ...

  10. ios 解决有关火星坐标的问题

    CLLocationManager 定位获取CLLocation 是地球坐标,而MKMapView 获取的是天朝火星坐标,这就导致了使用定位的时候,显示用户的蓝点和当前定位信息偏差(因为蓝点是调用了M ...