当前位置:主页 > 网页前端 > AngularJS >

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

时间:2021-06-20 08:50:40 | 栏目:AngularJS | 点击:

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 
                        
  
                        
						
					

相关文章

  • angular4模块中给标签添加背景图的实现方法

    angular4模块中给标签添加背景图的实现方法

    下面小编就为大家带来一篇angular4模块中给标签添加背景图的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解Angular的数据显示优化处理

    详解Angular的数据显示优化处理

    本文主要对Angular的数据显示优化处理进行详细介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • 在 Angular中 使用 Lodash 的方法

    在 Angular中 使用 Lodash 的方法

    这篇文章主要介绍了在 Angular中 使用 Lodash 的方法,需要的朋友可以参考下
    2018-02-02
  • 详解Angular-ui-BootStrap组件的解释以及使用

    详解Angular-ui-BootStrap组件的解释以及使用

    这篇文章主要介绍了详解Angular-ui-BootStrap组件的解释以及使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 如何在AngularJs中调用第三方插件库

    如何在AngularJs中调用第三方插件库

    在AngularJs中我们会不可避免的使用第三方库,这篇文章主要介绍了如何在AngularJs中调用第三方插件库,有兴趣的可以了解下
    2017-05-05
  • 浅谈Angular2 模块懒加载的方法

    浅谈Angular2 模块懒加载的方法

    本篇文章主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • AngularJS通过$sce输出html的方法

    AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览器解析怎么办呢?不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。
    2016-09-09
  • AngularJS实现动态切换样式的方法分析

    AngularJS实现动态切换样式的方法分析

    这篇文章主要介绍了AngularJS实现动态切换样式的方法,结合实例形式分析了AngularJS事件响应与样式动态控制相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • 完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

    完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

    下面小编就为大家带来一篇完美解决UI-Grid表格元素中多个空格显示为一个空格的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 关于AngularJS中几种Providers的区别总结

    关于AngularJS中几种Providers的区别总结

    这篇文章主要给大家介绍了关于AngularJS中几种Providers的区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05

最新评论

您可能感兴趣的文章:

相关文章