import { Component, ElementRef, Input, HostBinding, HostListener, OnInit } from '@angular/core'; @Component({
  selector: 'exe-base', // template will not be inherited template: `
  <div>
    exe-base：我是base组件么"htmlcode">

import { Component, HostListener, OnChanges, SimpleChanges } from '@angular/core'; import { BaseComponent } from './exe-base.component'; @Component({
  selector: 'exe-inherited',
  template: `
  <div>
   exe-inherited：我是base组件么"htmlcode">

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下一页阅读全文

                                
                                

                                    angular,组件继承,angularjs2,组件,继承 
                                
DDR爱好者之家 Design By 杰米