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
}

Angular 2继承组件

1 个答案: