欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 10:40:54
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控制器继承自另一控制器




        

相关文章

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

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

    这篇文章主要给大家介绍了关于angular5升级rxjs到5.5.3报错:emptyerror: no elements in sequence的解决方法,文中介绍了两个解决方法,大家可以选择使用,需要的朋友可以参考借鉴,下面来一起看看吧。
    2018-04-04
  • angular组件继承的实现方法第1/2页

    angularjs 动态加载模块和依赖

    这篇文章主要介绍了angularjs 动态加载模块和依赖方法的相关资料,需要的朋友可以参考下
    2016-09-09
  • angular组件继承的实现方法第1/2页

    angularjs实现与后台服务器进行交互的示例讲解

    今天小编就为大家分享一篇angularjs实现与后台服务器进行交互的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angular组件继承的实现方法第1/2页

    angularjs实现ajax请求的方法

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

    angularjs使用ui-route实现多层嵌套路由的示例

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

    angularjs ng-template寄宿方式用法分析

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

    基于angularjs的简单使用详解

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

最新评论

相关标签: 组件 继承