Angular 2 继承组件

Question

我有一个 basewindow.component，它将成为我所有组件的基础组件。这个 basewindow.component 将具有保存、删除等按钮，并且在单击“新建”按钮时，我想在执行后调用 basewindow 函数ufbNew() 应该执行父窗口函数ufNew()。请检查我的代码并帮助我是否正确执行。我可以调用基本函数，但不能调用父函数

//basewindow.component/// 


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

@Component({
    selector: 'basewindow',
    templateUrl: './Basewindow.component.html',
    styleUrls: ['./Basewindow.component.css']
})
export class BasewindowComponent {

/////////////////////// User Base Functions ///////////////////

    ufbNew() {

       this.ufNew();
    }
    ufbSave() {
        this.ufSave();
    }

    /////////////////////// User Functions for parent ///////////////////

    ufNew() {
      alert("I m In Base ufbNew")  
    }
    ufSave() {
    }

}


 //// Basewindow.component.html

<div class="container">
    <h1>Hero Form</h1>
    <form>
        <div class="form-group"> 

            <button (click)="ufbNew()">New</button>
            <button (click)="ufbSave()">Save</button> 

        </div>

    </form>
</div>


/////////////////////////// AccountsCategory.Component (Parent 1) ////



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

@Component({
    selector: 'app',
    templateUrl: './AccountsCategory.component.html' 
})
export class AccountsCategory extends BasewindowComponent {


   /////////////////////// User Functions for parent ///////////////////
    ufNew() {
      alert("I m in Acounts category (parent)")    
    }
    ufSave() {
    }
}


 //////////// AccountsCategory.component.html /////////////

<basewindow> </basewindow>

我的目的是重用基础组件对象、函数并在需要时从子组件中覆盖。 请参阅 plnkr 中的测试应用程序

https://plnkr.co/edit/bVxt4GjNXwIg7pDbR4sE?p=preview

Answer 1

使用这个

abstract class Animal {
    //OTHER STUFF

    abstract ufSave(): void;

    //OTHER STUFF
}