Angular中Component組件有什么用

小編給大家分享一下Angular中Component組件有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Angular 組件（Component）

組件（Component） 是構(gòu)成 Angular 應(yīng)用的基礎(chǔ)和核心。 通俗來(lái)說(shuō)， 組件用來(lái)包裝特定的功能， 應(yīng)用程序的有序運(yùn)行依賴于組件之間的協(xié)調(diào)工作。

Component 必備元素

• @Component（組件元數(shù)據(jù)裝飾器）

@Component 裝飾器的作用是告知 Angular 框架如何處理 Typescript 類， 它包含多個(gè)屬性， 這些屬性的值叫作元數(shù)據(jù)。 Angular 會(huì)根據(jù)元數(shù)據(jù)的值來(lái)渲染組件并執(zhí)行組件的邏輯。

• Template（模板）

Template 模板用于定義組件的外觀， 模板以 html 的形式存在， 告訴 Angular 如何渲染組件。 我們可以在模板中使用 Angular 的數(shù)據(jù)綁定語(yǔ)法來(lái)呈現(xiàn)控制器中的數(shù)據(jù)。

• Controller（控制器）

控制器是一個(gè)普通的 Typescript 類， 它會(huì)被 @Component 裝飾器修飾， 控制器包含組件所有的屬性和方法， 大多數(shù)的頁(yè)面邏輯都寫(xiě)在控制器里。 控制器通過(guò)數(shù)據(jù)綁定與模板進(jìn)行通訊， 模板展現(xiàn)控制器的數(shù)據(jù)， 控制器處理模板上發(fā)生的事件。

示例

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppService],
})
export class AppComponent {
  title = 'app demo';

  .....
}

• selector

@Component 裝飾器指定的 CSS 選擇器, 它會(huì)告訴 Angular， 一旦在模板 HTML 中找到了這個(gè)選擇器對(duì)應(yīng)的標(biāo)簽， 就創(chuàng)建并插入該組件的一個(gè)實(shí)例。

• templateUrl

templateUrl 指定了一個(gè) HTML 文件作為組件的模板。 還可以用 template 屬性的值來(lái)提供內(nèi)聯(lián)的 HTML 模板

• styleUrls: ['./app.component.css']

styleUrls 指向一組 CSS 文件， 可以在這些 CSS 文件中編寫(xiě)組件要用到的樣式。

• providers

當(dāng)前組件所需的服務(wù)提供商的一個(gè)數(shù)組

• AppComponent

組件的控制器， 一個(gè)被裝飾器修飾的 Typescript 類。

Component 其他元素

以上是“Angular中Component組件有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！