Angular中Component的作用是什么

Angular中 Component的作用是什么，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括倉(cāng)山網(wǎng)站建設(shè)、倉(cāng)山網(wǎng)站制作、倉(cāng)山網(wǎng)頁(yè)制作以及倉(cāng)山網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，倉(cāng)山網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到倉(cāng)山省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

定義

W3C為統(tǒng)一組件化標(biāo)準(zhǔn)方式，提出Web Component的標(biāo)準(zhǔn)。

每個(gè)組件包含自己的html、css、js代碼。
Web Component標(biāo)準(zhǔn)包括以下四個(gè)重要的概念：
1.Custom Elements（自定義標(biāo)簽）：可以創(chuàng)建自定義 HTML 標(biāo)記和元素；
2.HTML Templates（HTML模版）：使用 <template> 標(biāo)簽去預(yù)定義一些內(nèi)容，但并不加載至頁(yè)面，而是使用 JS 代碼去初始化它；
3.Shadow DOM（虛擬DOM）：可以創(chuàng)建完全獨(dú)立與其他元素的DOM子樹(shù)；
4.HTML Imports（HTML導(dǎo)入）：一種在 HTML 文檔中引入其他 HTML 文檔的方法，<link rel="import" href="example.html" rel="external nofollow" />。

概括來(lái)說(shuō)就是，可以創(chuàng)建自定義標(biāo)簽來(lái)引入組件是前端組件化的基礎(chǔ)，在頁(yè)面引用 HTML 文件和 HTML 模板是用于支撐編寫組件視圖和組件資源管理，而 Shadow DOM 則是隔離組件間代碼的沖突和影響。

示例

定義hello-component

<template id="hello-template">
  <style>
    h2 {
      color: red;
    }
  </style>
  <h2>Hello Web Component!</h2>
</template>

<script>

  // 指向?qū)胛臋n，即本例的index.html
  var indexDoc = document;

  // 指向被導(dǎo)入文檔，即當(dāng)前文檔hello.html
  var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument;

  // 獲得上面的模板
  var tmpl = helloDoc.querySelector('#hello-template');

  // 創(chuàng)建一個(gè)新元素的原型，繼承自HTMLElement
  var HelloProto = Object.create(HTMLElement.prototype);

  // 設(shè)置 Shadow DOM 并將模板的內(nèi)容克隆進(jìn)去
  HelloProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(indexDoc.importNode(tmpl.content, true));
  };

  // 注冊(cè)新元素
  var hello = indexDoc.registerElement('hello-component', {
    prototype: HelloProto
  });
</script>

使用hello-component

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="賴祥燃, laixiangran@163.com, http://www.laixiangran.cn"/>
  <title>Web Component</title>
  <!--導(dǎo)入自定義組件-->
  <link rel="import" href="hello.html" rel="external nofollow" >
</head>
<body>
  <!--自定義標(biāo)簽-->
  <hello-component></hello-component>
</body>
</html>

從以上代碼可看到，hello.html 為按標(biāo)準(zhǔn)定義的組件（名稱為 hello-component ），在這個(gè)組件中有自己的結(jié)構(gòu)、樣式及邏輯，然后在 index.html 中引入該組件文件，即可像普通標(biāo)簽一樣使用。

Angular Component

Angular Component屬于指令的一種，可以理解為擁有模板的指令。其它兩種是屬性型指令和結(jié)構(gòu)型指令。

基本組成

@Component({
  selector: 'demo-component',
  template: 'Demo Component'
})
export class DemoComponent {}

組件裝飾器：每個(gè)組件類必須用@component進(jìn)行裝飾才能成為Angular組件。
組件元數(shù)據(jù)：組件元數(shù)據(jù)：selector、template等，下文將著重講解每個(gè)元數(shù)據(jù)的含義。
組件類：組件實(shí)際上也是一個(gè)普通的類，組件的邏輯都在組件類里定義并實(shí)現(xiàn)。
組件模板：每個(gè)組件都會(huì)關(guān)聯(lián)一個(gè)模板，這個(gè)模板最終會(huì)渲染到頁(yè)面上，頁(yè)面上這個(gè)DOM元素就是此組件實(shí)例的宿主元素。

組件元數(shù)據(jù)

自身元數(shù)據(jù)屬性

名稱	類型	作用
animations	AnimationEntryMetadata[]	設(shè)置組件的動(dòng)畫
changeDetection	ChangeDetectionStrategy	設(shè)置組件的變化監(jiān)測(cè)策略
encapsulation	ViewEncapsulation	設(shè)置組件的視圖包裝選項(xiàng)
entryComponents	any[]	設(shè)置將被動(dòng)態(tài)插入到該組件視圖中的組件列表
interpolation	[string, string]	自定義組件的插值標(biāo)記，默認(rèn)是雙大括號(hào)
moduleId	string	設(shè)置該組件在 ES/CommonJS 規(guī)范下的模塊id，它被用于解析模板樣式的相對(duì)路徑
styleUrls	string[]	設(shè)置組件引用的外部樣式文件
styles	string[]	設(shè)置組件使用的內(nèi)聯(lián)樣式
template	string	設(shè)置組件的內(nèi)聯(lián)模板
templateUrl	string	設(shè)置組件模板所在路徑
viewProviders	Provider[]	設(shè)置組件及其所有子組件（不含ContentChildren）可用的服務(wù)

從 core/Directive 繼承

名稱	類型	作用
exportAs	string	設(shè)置組件實(shí)例在模板中的別名，使得可以在模板中調(diào)用
host	{[key: string]: string}	設(shè)置組件的事件、動(dòng)作和屬性等
inputs	string[]	設(shè)置組件的輸入屬性
outputs	string[]	設(shè)置組件的輸出屬性
providers	Provider[]	設(shè)置組件及其所有子組件（含ContentChildren）可用的服務(wù)（依賴注入）
queries	{[key: string]: any}	設(shè)置需要被注入到組件的查詢
selector	string	設(shè)置用于在模板中識(shí)別該組件的css選擇器（組件的自定義標(biāo)簽）

幾種元數(shù)據(jù)詳解

以下幾種元數(shù)據(jù)的等價(jià)寫法會(huì)比元數(shù)據(jù)設(shè)置更簡(jiǎn)潔易懂，所以一般推薦的是等價(jià)寫法。

inputs

@Component({
  selector: 'demo-component',
  inputs: ['param']
})
export class DemoComponent {
  param: any;
}

等價(jià)于：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @Input() param: any;
}

outputs

@Component({
  selector: 'demo-component',
  outputs: ['ready']
})
export class DemoComponent {
  ready = new eventEmitter<false>();
}

等價(jià)于：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @Output() ready = new eventEmitter<false>();
}

host

@Component({
  selector: 'demo-component',
  host: {
    '(click)': 'onClick($event.target)', // 事件
    'role': 'nav', // 屬性
    '[class.pressed]': 'isPressed', // 類
  }
})
export class DemoComponent {
  isPressed: boolean = true;

  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

等價(jià)于：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @HostBinding('attr.role') role = 'nav';
  @HostBinding('class.pressed') isPressed: boolean = true;

 
  @HostListener('click', ['$event.target'])
  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

queries - 視圖查詢

@Component({
  selector: 'demo-component',
  template: `
    <input #theInput type='text' />
    <div>Demo Component</div>
  `,
  queries: {
    theInput: new ViewChild('theInput')
  }
})
export class DemoComponent {
  theInput: ElementRef;
}

等價(jià)于：

@Component({
  selector: 'demo-component',
  template: `
    <input #theInput type='text' />
    <div>Demo Component</div>
  `
})
export class DemoComponent {
  @ViewChild('theInput') theInput: ElementRef;
}

queries - 內(nèi)容查詢

<my-list>
  <li *ngFor="let item of items;">{{item}}</li>
</my-list>

@Directive({
  selector: 'li'
})
export class ListItem {}

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `,
  queries: {
    items: new ContentChild(ListItem)
  }
})
export class MyListComponent {
  items: QueryList<ListItem>;
}

等價(jià)于：

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyListComponent {
  @ContentChild(ListItem) items: QueryList<ListItem>;
}

styleUrls、styles

styleUrls和styles允許同時(shí)指定。

優(yōu)先級(jí)：模板內(nèi)聯(lián)樣式 > styleUrls > styles。

建議：使用styleUrls引用外部樣式表文件，這樣代碼結(jié)構(gòu)相比styles更清晰、更易于管理。同理，模板推薦使用templateUrl引用模板文件。

changeDetection

ChangeDetectionStrategy.Default：組件的每次變化監(jiān)測(cè)都會(huì)檢查其內(nèi)部的所有數(shù)據(jù)（引用對(duì)象也會(huì)深度遍歷），以此得到前后的數(shù)據(jù)變化。

ChangeDetectionStrategy.OnPush：組件的變化監(jiān)測(cè)只檢查輸入屬性（即@Input修飾的變量）的值是否發(fā)生變化，當(dāng)這個(gè)值為引用類型（Object，Array等）時(shí)，則只對(duì)比該值的引用。

顯然，OnPush策略相比Default降低了變化監(jiān)測(cè)的復(fù)雜度，很好地提升了變化監(jiān)測(cè)的性能。如果組件的更新只依賴輸入屬性的值，那么在該組件上使用OnPush策略是一個(gè)很好的選擇。

encapsulation

ViewEncapsulation.None：無(wú) Shadow DOM，并且也無(wú)樣式包裝。

ViewEncapsulation.Emulated：無(wú) Shadow DOM，但是通過(guò)Angular提供的樣式包裝機(jī)制來(lái)模擬組件的獨(dú)立性，使得組件的樣式不受外部影響，這是Angular的默認(rèn)設(shè)置。

ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。

生命周期

當(dāng)Angular使用構(gòu)造函數(shù)新建組件后，就會(huì)按下面的順序在特定時(shí)刻調(diào)用這些生命周期鉤子方法：

生命周期鉤子	調(diào)用時(shí)機(jī)
ngOnChanges	在ngOnInit之前調(diào)用，或者當(dāng)組件輸入數(shù)據(jù)（通過(guò)@Input裝飾器顯式指定的那些變量）變化時(shí)調(diào)用。
ngOnInit	第一次ngOnChanges之后調(diào)用。建議此時(shí)獲取數(shù)據(jù)，不要在構(gòu)造函數(shù)中獲取。
ngDoCheck	每次變化監(jiān)測(cè)發(fā)生時(shí)被調(diào)用。
ngAfterContentInit	使用
ngAfterContentChecked	ngAfterContentInit后被調(diào)用，或者每次變化監(jiān)測(cè)發(fā)生時(shí)被調(diào)用（只適用組件）。
ngAfterViewInit	創(chuàng)建了組件的視圖及其子視圖之后被調(diào)用（只適用組件）。
ngAfterViewChecked	ngAfterViewInit，或者每次子組件變化監(jiān)測(cè)時(shí)被調(diào)用（只適用組件）。
ngOnDestroy	銷毀指令/組件之前觸發(fā)。此時(shí)應(yīng)將不會(huì)被垃圾回收器自動(dòng)回收的資源（比如已訂閱的觀察者事件、綁定過(guò)的DOM事件、通過(guò)setTimeout或setInterval設(shè)置過(guò)的計(jì)時(shí)器等等）手動(dòng)銷毀掉。

關(guān)于Angular中 Component的作用是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享文章：Angular中Component的作用是什么
當(dāng)前鏈接：http://aaarwkj.com/article20/pcdeco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站營(yíng)銷、軟件開(kāi)發(fā)、域名注冊(cè)、做網(wǎng)站、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

Angular中Component的作用是什么