當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Angular2 组件

發布時間：2024/1/3 综合教程 25 生活家

生活随笔收集整理的這篇文章主要介紹了 Angular2 组件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 組件說明

Angular2 組件是構成Angular2應用程序的核心部分，Angualr2應用程序本質上來說就是一個組件樹，Angular2組件一般由模塊，注解，元數據以及組件類組成，實現組件類邏輯和視圖模板的相互交互。來看下面的這個簡單的組件的例子：

2. 模塊

模塊是一個內聚的代碼塊，用來實現某種單一的功能，可以進行導入來使用模塊內的變量，類或者函數等，如下所示，組件需要導入一些該組件使用到的函數，其他組件，服務等模塊，例如，從 @angular/core中導入Component函數，導入其他依賴組件HeaderComponent等。

import { Component, OnInit, Inject, ViewChild} from '@angular/core';

import { HeaderComponent } from './header';

import { DetailsComponent } from './details';

import { ButtonComponent } from './button';

import { EPO_PR_HEAD_P2P } from '../../model';

import { PrStore } from '../../store';

import { PrService } from '../../service';

3. 注解

從@angular/core中導入Component函數后，可以使用@Component()來標示組件類為一個Component，@標示注解的一種標識，用來對組件類福建對應的元數據信息。

4. 元數據

@Component將元數據的信息附加到組件類上，我們來詳細了解一下常用的組件元數據信息都有哪些：

@Component({

moduleId: "pr-input-mkt",

selector: 'pr-input-mkt',

//inline template

<ui-header [header]="PrEntity.header"></ui-header>

<ui-details [details]="PrEntity.details"></ui-details>

<ui-button [header]="PrEntity.header" (onsubmit)="dosubmit($event)"></ui-button>

//out template

templateUrl: `./template.html`,

directives: [HeaderComponent, DetailsComponent, ButtonComponent],

pipes: [DatePipe],

providers: [PrService]

})

moduleId：組件標識ID，用來區分各個組件，主要作用于相對路徑使用組件，可以準確定位到組件。

selector：選擇器名稱，在組件使用過程中，充當模板中的標識，類似a標簽中的a。這個屬性信息是必須的，必須精確的指定在模板中所使用的標簽定義，可以為屬性，標簽或者樣式類等，例子中使用是采用標簽的形式使用的。

template/templateUrl：組件對應的模板，template是組件內部的用法，引入外部模板文件使用templateUrl。

directives：在組件模板中使用的其他組件或者指令，引入以后可以在模板中進行使用。

pipes：管道集合，組件模板中使用到的管道，引入后可以在模板中進行使用。

providers：服務提供者集合，依賴注入系統的部分，配置了那些新的服務會引入到組件類中進行使用。

5. 組件類

組件類作為組件的核心代碼區域，包含了組件的邏輯以及視圖的顯示數據信息。組件類的用戶主要是體現在輸入和輸出兩個部分。

5.1 Input

輸入使用@Input()注解來表示，將父組件的數據綁定到對應的子組件的屬性中。例如 HeaderComponent 組件中，使用@Input() 來附加輸入屬性到header上。

import { Component, OnInit, Input, } from '@angular/core';

import { EPO_PR_HEAD_P2P} from '../../model';

import { PrService } from '../../service';

@Component({

selector: 'ui-header',

<legend>Form title</legend>

</div>

</div>

</form>

})

export class HeaderComponent implements OnInit {

_init: boolean = false;

@Input()

header: EPO_PR_HEAD_P2P;

}

那么如何在父組件中如何調用呢，其實非常簡單，實際上就是模板語法中屬性的綁定方式，將父組件中的數據傳遞到子組件中。

<ui-header [header]="PrEntity.header"></ui-header>

5.2 Output

輸入使用@ Output ()注解來表示，將子組件觸發的事件提交到父組件中。例如 ButtonComponent組件中，使用@ Output () 來創建一個事件觸發器onsave，當點擊save按鈕的時候觸發onsave事件，并傳遞對應的數據’save’。

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({

selector: 'ui-button',

</div>

})

export class ButtonComponent implements OnInit {

@Output()

onsave = new EventEmitter();

constructor() { }

ngOnInit() { }

save($event) {

this.onsave.emit('save');

}

那么如何在父組件中如何調用呢，和組件輸入相似，不過本次采用的是模板語法中事件的綁定方式，$event表示傳遞的參數信息，當點擊子組件save按鈕的時候的時候，父組件中的dosave方法便會執行。

<ui-button (onsave)="dosave($event)"></ui-button>

總結

以上是生活随笔為你收集整理的Angular2 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

组件

上一篇：传统目标检测算法之DPM
下一篇：怎么创建具有真实纹理的CG场景岩石？