AngularJS2初学小结

本文的实例中用到了ng2-bootStrap ,是用Angular2和bootStrap开发的第三方Component。感兴趣的同窗能够戳连接看看。

###Component

1. 自定义Component -在Angular2中使用@Component 注解在自定义组件：

import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
  selector: 'my-app',
  directives: [AlertComponent],
  templateUrl:'Demo.html'
})
export class AppComponent {
}

其中Demo.html就是一个html文件内容以下：

<alert type="info">ng2-bootstrap hello world!</alert>

你就能够在你的index.html中使用<my-app></my-app>

截图以下：

2.@Component 的属性 在@Component中有几个比较经常使用的属性，上面的eg中出现了三个。

• selector 至关与html的标签。
• directives 在你的Component 中使用到其余Component的类名。(在上eg.中咱们使用到了ng2-bootstrap的<alert></alert>标签，他的类名为AlertComponent)
• templateUrl 自定义的组件的html元素。

固然还有一些其余的经常使用属性，如今几个我比较经常使用的几个属性

3.inputs 和 outputs

• inputs ：此处的input和html的<input></input> 没有半毛钱关系 将自定义组件的某个值做为一个input，但愿有上级组件为其赋值。 usage：

import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
  selector: 'demo',
  inputs: ['h2Value'],
  template: `
    <h2>{{h2Value}}</h2>
  `
})
export class InputComponent {
  public h2Value: string = "Hello";
}
@Component({
  selector: 'my-app',
  directives: [InputComponent],
  template: `
  <div>
  <demo [h2Value]="customValue"></demo>
  </div>
  `
})
export class AppComponent {
  customValue: string = "Hello World!";
}

能够看到在第一个Component中<h2>的innerHTML为h2Value 是一个input，在AppComponent咱们引用了他，故[h2Value]能够当作<demo></demo>标签中一个属性，并将其复制为customValue，为了与正常的html属性区别开，angular2将放在[]中。

• outputs 一个output就是一个dom事件，如click,dblclick等，为了能引用此组件的组件能够出发这些事件咱们能够将一个事件定义为output。 实例：代码git地址:https://git.oschina.net/mercy_yang/angular2-quickstart.git

• pipes pipes至关于angular1 中filter。