Angular 2 从 html 调用 super 方法

Question

我已经成功实现了继承一个类。我想从模板调用 super 方法，但现在我得到的是Cannot read property 'presentModal' of undefined：

@Component({})
class Dia {
    constructor(public modalCtrl: ModalController) {
    }

    presentModal() {
        const detailModal = this.modalCtrl.create(AgendaDetails, { showDetails: 8675309 });
        detailModal.present();
    }
}

@Component({
    templateUrl: 'dimarts-tab.html',
})
export class Dimarts extends Dia { }

并在模板中：

<ion-item text-wrap (click)="super.presentModal()">

我也试过 $super, $parent 没有成功。目前唯一可行的解​​决方案是在其中创建方法Dimarts并在那里调用 super 。

有任何想法吗？

Answer 1

super是 ES6 语法，不能在使用它的方法之外使用。鉴于有Foo扩展类Bar，super关键字被解释为Bar在Foo构造函数和静态方法中以及Bar.prototype在实例方法中。

class Foo extends Bar {
  foo() {
    super.foo()
  }
}

将被转译为

var Foo = /** @class */ (function (_super) {
    __extends(Foo, _super);
    function Foo() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Foo.prototype.foo = function () {
        _super.prototype.foo.call(this);
    };
    return Foo;
}(Bar));

super.presentModal()在模板中使用的尝试违背了类继承和原型链的目的。

除非presentModal在子类中定义，否则从父类继承。它应该是：

<ion-item text-wrap (click)="presentModal()">