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

时间:2017-01-14 18:56:57

标签: javascript angularjs fullpage.js

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

的fullpage.js

我正在尝试在使用此配置加载页面时触发组件的特定方法:

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

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我发现了一个黑客去做我想做的事情,但它不是很干净。

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

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

我将afterLoad事件调用为静态函数,点击按钮。

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);
  }
}