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。