angular组件继承的实现方法第1/2页

程序员文章站 2022-09-06 13:34:39

angular 2.3 版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。组件继承涉及以下的内容： metadata：如 @inpu...

angular 2.3 版本中引入了组件继承的功能，该功能非常强大，能够大大增加我们组件的可复用性。

组件继承涉及以下的内容：

metadata：如 @input()、@output()、@contentchild/children、@viewchild/children 等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。

constructor：如果派生类未声明构造函数，它将使用基类的构造函数。这意味着在基类构造函数注入的所有服务，子组件都能访问到。

lifecycle hooks：如果基类中包含生命周期钩子，如 ngoninit、ngonchanges 等。尽管在派生类没有定义相应的生命周期钩子，基类的生命周期钩子会被自动调用。

需要注意的是，模板是不能被继承的，因此共享的 dom 结构或行为需要单独处理。了解详细信息，请查看 - properly support inheritance。

接下来我们来快速体验的组件继承的功能并验证以上的结论，具体示例如下(本文所有示例基于的 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;
}

接下来我们简要讨论一个可能令人困惑的主题，@component() 中元数据是否允许继承？答案是否定的，子组件是不能继承父组件装饰器中元数据。限制元数据继承，从根本上说，是有道理的，因为我们的元数据用是来描述组件类的，不同的组件我们是需要不同的元数据，如 selector、template 等。angular 2 组件继承主要还是逻辑层的复用，具体可以先阅读完下面实战的部分，再好好体会一下哈。

现在我们先来实现一个简单的分页组件,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

import { component, oninit } from '@angular/core'; import {managerservice} from "./manager.service"; @component({
 selector: 'exe-app',
 template: `
  <simple-pagination 
            12下一页阅读全文
            
您可能感兴趣的文章:angularjs中controller控制器继承的使用方法深入理解angular.js中的scope继承详解angular中的作用域及继承angularjs的ng-repeat指令与scope继承关系实例详解angularjs深入探讨scope，继承结构，事件系统和生命周期angularjs使用directive自定义指令实现attribute继承的方法详解angularjs控制器继承自另一控制器

angular5升级rxjs到5.5.3报错：emptyerror: no elements in sequ

这篇文章主要给大家介绍了关于angular5升级rxjs到5.5.3报错：emptyerror: no elements in sequence的解决方法，文中介绍了两个解决方法，大家可以选择使用，需要的朋友可以参考借鉴，下面来一起看看吧。
2018-04-04
angularjs 动态加载模块和依赖

这篇文章主要介绍了angularjs 动态加载模块和依赖方法的相关资料,需要的朋友可以参考下
2016-09-09
angularjs实现与后台服务器进行交互的示例讲解

今天小编就为大家分享一篇angularjs实现与后台服务器进行交互的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
angularjs实现ajax请求的方法

这篇文章主要介绍了angularjs实现ajax请求的方法,结合实例形式分析了angularjs实现ajax请求的前端界面、ajax交互及后台php处理技巧,需要的朋友可以参考下
2016-11-11
今天小编就为大家分享一篇angular5 子组件监听父组件传入值的变化方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
angularjs使用ui-route实现多层嵌套路由的示例

这篇文章主要介绍了angularjs使用ui-route实现多层嵌套路由的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
这篇文章主要介绍了angular 组件通信的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
angularjs ng-template寄宿方式用法分析

这篇文章主要介绍了angularjs ng-template寄宿方式用法,结合实例形式分析了ng-template模板的相关使用技巧,需要的朋友可以参考下
2016-11-11
本篇文章主要介绍了angularjs 的数据绑定实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
基于angularjs的简单使用详解

下面小编就为大家带来一篇基于angularjs的简单使用详解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09