Angular Extends

组件的继承

// 基础组件
// base.component.html

<p>base works!</p>
<div>{{aa}}</div>
<div class="fl-div">{{bb}}</div>

// base.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'l-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.less']
})
export class BaseComponent implements OnInit {

  @Input() bb = 'SeriousLose';
  public aa = 'aa';

  constructor() { }

  ngOnInit() {}

}

// 继承组件
// other-base.component.html

<p>other-base works!</p>
<l-base [bb]="bb"></l-base>

// other-base.component.ts

import { Component } from '@angular/core';
import { BaseComponent } from '../base/base.component';

@Component({
  selector: 'l-other-base',
  templateUrl: './other-base.component.html',
  styleUrls: ['./other-base.component.less']
  // styleUrls: BaseComponent.styleUrls.concat(["./other.component.less"])
  // styleUrls: ['./base/base.component.css', "./other.component.less"]
})
export class OtherBaseComponent extends BaseComponent {
  aa = 'bb';
}

源码

// 虚函数的集成

import { HostListener } from '@angular/core';

export abstract class BaseComponent {
  protected abstract getName(): string;

  @HostListener('click')
    onClick() {
        alert('Click');
    }
}

// 继承
import { Component } from '@angular/core';
import { BaseComponent } from './base';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.less'],
})
export class MyComponent extends BaseComponent {
  protected getName(): string {
    return 'MyComponent';
  }
}