如何在 Angular 4 应用程序中与 DOM 进行通信?

Question

我正在尝试调用addItems方法，但是，我收到错误：

未捕获的类型错误：this.addItems 不是函数

我正在使用带有jQuery和fullpage.js库的Angular 4。

page-content.component.ts

import { Component, OnInit } from '@angular/core';
import { MyDataService } from './my-data.service';
import * as $ from 'jquery';
import 'fullpage.js';
@Component({
selector: 'page-content',
providers: [MyDataService],
templateUrl: './page-content.component.html',
styleUrls: ['./page-content.component.css']
})
export class PageContentComponent implements OnInit {
single_post = ''; 
posts = [];
constructor(private newService: MyDataService) {
this.addItems(0, this.no_of_post);
}
ngOnInit() {
$(document).ready(function() {
if($('html').hasClass('fp-enabled')){
$.fn.fullpage.destroy('all');
}
$('#fullpage').fullpage({ 
onLeave: function(index, nextIndex, direction){
const start = this.no_of_post;
this.no_of_post += 1;
this.addItems(start, this.no_of_post);
}
});
});
}
addItems(startIndex, endIndex) {
for (let i = startIndex; i < this.no_of_post; ++i) {
this.newService.fetchData().subscribe(data=>{
this.single_post = data[i];
this.posts.push(this.single_post);
}); 
}
}
}

Answer 1

我建议你将这个调用从构造函数移动到ngOnInit((

constructor(private newService: MyDataService) {
this.addItems(0, this.no_of_post);
}

问题是this在它的类上得分。该类中没有属性no_of_post。

你也有这个字符串的问题

onLeave: function(index, nextIndex, direction) {

使用箭头功能

onLeave: (index, nextIndex, direction) => {