Angular 2 从 html 调用超级方法

Question

我已经成功继承了一个class。我想从模板调用超级方法，但现在我得到的是 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 class 扩展了 Bar，super 关键字在 Foo 构造函数和静态方法中被解释为 Bar 以及 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() 的尝试违背了 class 继承和原型链的目的。

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

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

Angular 2 从 html 调用超级方法

Angular 2 call super method from html

typescript

angular2-template

angular