欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular組件繼承的實(shí)現(xiàn)方法第1/2頁(yè)

 更新時(shí)間:2018年02月26日 14:27:28   作者:阿踏  
本篇文章主要介紹了angular組件繼承的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

Angular 2.3 版本中引入了組件繼承的功能,該功能非常強(qiáng)大,能夠大大增加我們組件的可復(fù)用性。

組件繼承涉及以下的內(nèi)容:

Metadata:如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生類中定義的元數(shù)據(jù)將覆蓋繼承鏈中的任何先前的元數(shù)據(jù),否則將使用基類元數(shù)據(jù)。

Constructor:如果派生類未聲明構(gòu)造函數(shù),它將使用基類的構(gòu)造函數(shù)。這意味著在基類構(gòu)造函數(shù)注入的所有服務(wù),子組件都能訪問(wèn)到。

Lifecycle hooks:如果基類中包含生命周期鉤子,如 ngOnInit、ngOnChanges 等。盡管在派生類沒(méi)有定義相應(yīng)的生命周期鉤子,基類的生命周期鉤子會(huì)被自動(dòng)調(diào)用。

需要注意的是,模板是不能被繼承的 ,因此共享的 DOM 結(jié)構(gòu)或行為需要單獨(dú)處理。了解詳細(xì)信息,請(qǐng)查看 - properly support inheritance。

接下來(lái)我們來(lái)快速體驗(yàn)的組件繼承的功能并驗(yàn)證以上的結(jié)論,具體示例如下(本文所有示例基于的 Angular 版本是 - 4.0.1):

exe-base.component.ts

import { Component, ElementRef, Input, HostBinding, HostListener, OnInit } from '@angular/core'; @Component({
  selector: 'exe-base', // template will not be inherited template: `
  <div>
    exe-base:我是base組件么? - {{isBase}}
  </div>
 ` }) export class BaseComponent implements OnInit { @Input() isBase: boolean = true; @HostBinding('style.color') color = 'blue'; // will be inherited @HostListener('click', ['$event']) // will be inherited onClick(event: Event) { console.log(`I am BaseComponent`);
  } constructor(protected eleRef: ElementRef) { }

  ngOnInit() { console.dir('BaseComponent:ngOnInit method has been called');
  }
}

exe-inherited.component.ts

import { Component, HostListener, OnChanges, SimpleChanges } from '@angular/core'; import { BaseComponent } from './exe-base.component'; @Component({
  selector: 'exe-inherited',
  template: `
  <div>
   exe-inherited:我是base組件么? - {{isBase}}
  </div>
 ` }) export class InheritedComponent extends BaseComponent implements OnChanges { @HostListener('click', ['$event']) // overridden onClick(event: Event) { console.log(`I am InheritedComponent`);
  }
  ngOnChanges(changes: SimpleChanges) { console.dir(this.eleRef); // this.eleRef.nativeElement:exe-inherited }
}

app.component.ts

import { Component, OnInit } from '@angular/core'; import {ManagerService} from "./manager.service"; @Component({
 selector: 'exe-app',
 template: `
  <exe-base></exe-base>
  <hr/>
  <exe-inherited [isBase]="false"></exe-inherited>
 ` }) export class AppComponent {
 currentPage: number = 1;
 totalPage: number = 5;
}

接下來(lái)我們簡(jiǎn)要討論一個(gè)可能令人困惑的主題,@Component() 中元數(shù)據(jù)是否允許繼承?答案是否定的,子組件是不能繼承父組件裝飾器中元數(shù)據(jù)。限制元數(shù)據(jù)繼承,從根本上說(shuō),是有道理的,因?yàn)槲覀兊脑獢?shù)據(jù)用是來(lái)描述組件類的,不同的組件我們是需要不同的元數(shù)據(jù),如 selector、template 等。Angular 2 組件繼承主要還是邏輯層的復(fù)用,具體可以先閱讀完下面實(shí)戰(zhàn)的部分,再好好體會(huì)一下哈。

現(xiàn)在我們先來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)組件,simple-pagination.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({
  selector: 'simple-pagination',
  template: `
    <button (click)="previousPage()" [disabled]="!hasPrevious()">Previous</button> 
    <button (click)="nextPage()" [disabled]="!hasNext()">Next</button>
    <p>page {{ page }} of {{ pageCount }} </p>
  ` }) export class SimplePaginationComponent { @Input() pageCount: number; @Input() page: number; @Output() pageChanged = new EventEmitter<number>();

  nextPage() { this.pageChanged.emit(++this.page);
  }

  previousPage() { this.pageChanged.emit(--this.page);
  }

  hasPrevious(): boolean { return this.page > 1;
  }

  hasNext(): boolean { return this.page < this.pageCount;
  }
}

app.component.ts

相關(guān)文章

  • Angular2關(guān)于@angular/cli默認(rèn)端口號(hào)配置的問(wèn)題

    Angular2關(guān)于@angular/cli默認(rèn)端口號(hào)配置的問(wèn)題

    本篇文章主要介紹了Angular2關(guān)于@angular/cli默認(rèn)端口號(hào)配置的問(wèn)題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-07-07
  • 詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題

    詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題

    本篇文章主要介紹了詳解基于angular-cli配置代理解決跨域請(qǐng)求問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • Angular Material Icon使用詳解

    Angular Material Icon使用詳解

    這篇文章主要介紹了Angular Material Icon使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • angularjs 獲取默認(rèn)選中的單選按鈕的value方法

    angularjs 獲取默認(rèn)選中的單選按鈕的value方法

    下面小編就為大家分享一篇angularjs 獲取默認(rèn)選中的單選按鈕的value方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • AngularJS 日期格式化詳解

    AngularJS 日期格式化詳解

    AngularJS的日期格式化有兩種形式,一種是在HTML頁(yè)面,一種是在JS代碼里,都是用到AngularJS的過(guò)濾器$filter
    2015-12-12
  • 利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果

    利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果

    這篇文章給大家介紹了如何利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖的效果,本文通過(guò)示例代碼詳細(xì)介紹了實(shí)現(xiàn)過(guò)程,對(duì)大家學(xué)習(xí)AngularJS具有一定參考借鑒價(jià)值,有需要的朋友們可以參考借鑒。
    2016-09-09
  • angular1配合gulp和bower的使用教程

    angular1配合gulp和bower的使用教程

    這篇文章主要介紹了angular1配合gulp和bower使用教程,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-01-01
  • AngularJS自定義控件實(shí)例詳解

    AngularJS自定義控件實(shí)例詳解

    這篇文章主要介紹了AngularJS自定義控件,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS自定義指令與模板操作的相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下
    2016-12-12
  • angularJS 指令封裝回到頂部示例詳解

    angularJS 指令封裝回到頂部示例詳解

    本篇文章主要介紹了angularJS 指令封裝回到頂部示例詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-01-01
  • 基于angularjs實(shí)現(xiàn)圖片放大鏡效果

    基于angularjs實(shí)現(xiàn)圖片放大鏡效果

    這篇文章給大家分享了angularjs實(shí)現(xiàn)購(gòu)物放大鏡效果的源碼實(shí)例,代碼介紹的很詳細(xì),有需要的可以參考借鑒,下面來(lái)一起看看。
    2016-08-08

最新評(píng)論