亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

剖析Angular Component的源碼示例

 更新時(shí)間:2018年03月23日 09:24:32   作者:laixiangran  
本篇文章主要介紹了剖析Angular Component的源碼示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

Web Component

在介紹Angular Component之前,我們先簡(jiǎn)單了解下W3C Web Components

定義

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 模板是用于支撐編寫(xiě)組件視圖和組件資源管理,而 Shadow DOM 則是隔離組件間代碼的沖突和影響。

示例

定義hello-component

<template id="hello-template">
  <style>
    h1 {
      color: red;
    }
  </style>
  <h1>Hello Web Component!</h1>
</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)定義的組件(名稱(chēng)為 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 {}
  1. 組件裝飾器:每個(gè)組件類(lèi)必須用@component進(jìn)行裝飾才能成為Angular組件。
  2. 組件元數(shù)據(jù):組件元數(shù)據(jù):selector、template等,下文將著重講解每個(gè)元數(shù)據(jù)的含義。
  3. 組件類(lèi):組件實(shí)際上也是一個(gè)普通的類(lèi),組件的邏輯都在組件類(lèi)里定義并實(shí)現(xiàn)。
  4. 組件模板:每個(gè)組件都會(huì)關(guān)聯(lián)一個(gè)模板,這個(gè)模板最終會(huì)渲染到頁(yè)面上,頁(yè)面上這個(gè)DOM元素就是此組件實(shí)例的宿主元素。

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

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

名稱(chēng) 類(lèi)型 作用
animations AnimationEntryMetadata[] 設(shè)置組件的動(dòng)畫(huà)
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 繼承

名稱(chēng) 類(lèi)型 作用
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à)寫(xiě)法會(huì)比元數(shù)據(jù)設(shè)置更簡(jiǎn)潔易懂,所以一般推薦的是等價(jià)寫(xiě)法。

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', // 類(lèi)
  }
})
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è)值為引用類(lèi)型(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 銷(xiāo)毀指令/組件之前觸發(fā)。此時(shí)應(yīng)將不會(huì)被垃圾回收器自動(dòng)回收的資源(比如已訂閱的觀察者事件、綁定過(guò)的DOM事件、通過(guò)setTimeout或setInterval設(shè)置過(guò)的計(jì)時(shí)器等等)手動(dòng)銷(xiāo)毀掉。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法

    使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法

    這篇文章主要介紹了使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法,AngularJS是一款熱門(mén)的JavaScript庫(kù),需要的朋友可以參考下
    2015-06-06
  • angular雙向綁定模擬探索

    angular雙向綁定模擬探索

    這篇文章主要和大家一起探索模擬angular的雙向綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • 詳解AngularJS Filter(過(guò)濾器)用法

    詳解AngularJS Filter(過(guò)濾器)用法

    這篇文章主要介紹了AngularJS的filter,中文名“過(guò)濾器”是用來(lái)過(guò)濾變量的值,或者格式化輸出,得到自己所期望的結(jié)果或格式的東東,的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • AngularJS 使用$sce控制代碼安全檢查

    AngularJS 使用$sce控制代碼安全檢查

    SCE,即strict contextual escaping,我的理解是 嚴(yán)格的上下文隔離 ...翻譯的可能不準(zhǔn)確,但是通過(guò)字面理解,應(yīng)該是angularjs嚴(yán)格的控制上下文訪問(wèn),通過(guò)本文給大家介紹AngularJS 使用$sce控制代碼安全檢查,對(duì)angularjs sce相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證

    Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證

    這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 詳解angularJs中自定義directive的數(shù)據(jù)交互

    詳解angularJs中自定義directive的數(shù)據(jù)交互

    這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-01-01
  • AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例

    AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例

    本篇文章主要介紹了AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • 詳解angular ui-grid之過(guò)濾器設(shè)置

    詳解angular ui-grid之過(guò)濾器設(shè)置

    本篇文章主要介紹了詳解angular ui-grid之過(guò)濾器設(shè)置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • AngularJS中的攔截器實(shí)例詳解

    AngularJS中的攔截器實(shí)例詳解

    這篇文章主要介紹了AngularJS中的攔截器實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • AngularJS 作用域詳解及示例代碼

    AngularJS 作用域詳解及示例代碼

    本文主要介紹AngularJS 作用域的知識(shí),這里整理了基礎(chǔ)資料,和示例代碼以及實(shí)現(xiàn)效果圖,有需要的小伙伴可以參考下
    2016-08-08

最新評(píng)論