Angular2 ng2-fullpage.js afterload 在错误的上下文中触发

Question

我正在使用 fullpage.js Angular 2 https://github.com/meiblorn/ng2-fullpage

当使用此配置加载页面时，我试图触发我的组件的特定方法：

export class NavbarComponent implements OnInit {

...

@Input() public options:MnFullpageOptions = new MnFullpageOptions({
afterLoad: this.type
});

type(anchorLink, page_num){
this.resetPages();
console.log(page_num);

let phrase;
...
}

}

"type" 方法被正确触发，但 "this" 调用在该方法内不起作用。我想这是因为它在另一个上下文中是运行。

Error: Uncaught (in promise): Error: Error in ./NavbarComponent class NavbarComponent - inline template:2:5 caused by: this.resetPages is not a function

我该如何解决这个问题？

Answer 1

我找到了一个 hack 来做我想做的事，但它不是很干净。

我创建了一个触发类型方法的隐藏按钮：

<button (click)="type(1);" class="hidden" id="show1"></button>

然后我让 afterLoad 事件调用一个静态函数，该函数在按钮上 'click'。

export class NavbarComponent implements OnInit {

...

@Input() public options:MnFullpageOptions = new MnFullpageOptions({
afterLoad: click
});

type(page_num){
...
}

}

function click(_, index){
  eventFire(document.getElementById('show' + index), 'click');
}

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    let evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

Angular2 ng2-fullpage.js afterload 在错误的上下文中触发

Angular2 ng2-fullpage.js afterload trigger in wrong context

javascript

angularjs

fullpage.js