Question

import { Component, OnInit, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { AppsService } from '../services/apps.service';
import { IApps, Apps, IDataUser, DataUser, IClient, Client, IAppData, AppData } from '../models/apps.model';
import { NgxSpinnerService } from 'ngx-spinner';
declare var require: any;
@Component({
  selector: 'rss-channel-content',
  templateUrl: './rss-channel.component.html',
  styleUrls: ['./rss-channel.component.scss'],
  providers: [
    AppsService,
    NgbModalConfig,
    NgbModal
  ]
})
export class RssChannelComponent implements OnInit {

  public isGallery: boolean = false;
  public is_view: boolean = false;
  public is_save: boolean = false;
  private id_app: string;
  public structure_app: IApps = new Apps();
  public form_data_user: FormGroup;
  public href: string = '';
  public url: string = '';
  public ocultar: boolean = false;
  public feed = require('rss-to-json');
  public rss: any;
  
  constructor(
    private appsService: AppsService,
    private route: ActivatedRoute,
    private modalService: NgbModal,
    private router: Router,
    private spinner: NgxSpinnerService,
    private titleService: Title,
    @Inject(DOCUMENT) private _document: HTMLDocument
  ) { }

  ngOnInit() {
    this.spinner.show();
    this.id_app = this.route.snapshot.params['id'];
    this.getApplication();
    this.getUrl();
  }
  private getUrl() {
    this.href = this.router.url;
    console.log(this.router.url);
    this.url = this.appsService.getUrl(this.href);
    console.log('url', this.url);

  }

  private getApplication() {
    this.appsService.getApp(this.id_app).subscribe(async (response) => {
      console.log('response', response);
      this.structure_app = response.response.options;
      this.titleService.setTitle(this.structure_app.name_app);
      this._document.getElementById('appFavicon').setAttribute('href', this.structure_app.icono_app);
      this.rss = await this.valueRss();
      this.is_view = true;
    }, (error) => {
      console.log(error);
    });
  }

  
  valueRss() {
    return new Promise((resolve, reject) => {
        console.log(this.structure_app.rss_url);
        this.feed.load(this.structure_app.rss_url, function (err, rss) {
        console.log(rss);
        resolve(rss);
      });
      this.spinner.hide();
    });
  }


  /**
   * changeColor
   */
  public changeColor(col: string, amt: any) {
    amt = amt === undefined ? -30 : amt;
    col = col === undefined ? '#eee' : col;
    return this.appsService.changeColor(col, amt);
  }

  public open(e: any) {
    this.modalService.open(e, { centered: true, size: 'lg' });
  }

}

说明：当我调用这个 getApplication api 方法时，在那个方法中，我正在调用 valueRSS 函数，但它给 this.feed.load 不是一个函数，也给我进程没有定义我正在使用 angular 10 和 rss-to-json 1.0.5 版。基本上在那个 api 中我们有 rss url 的响应，所以我们正在将该 rss url 转换为 json 数据并将其显示为 html

Answer 1

我不确定“rss-to-json”库是否与 Angular 的最新版本兼容。我目前使用的是 Angular 11.1，并不能真正使用包含该库的库来构建它。我的猜测是，您还面临一些不兼容问题，即 lib 未正确引用/加载，即使（以某种方式）您已设法使其构建。

所以也许这不是您期望的答案，但我的建议是改用 rss-parser，它仍然可以在 Angular 中使用。

以下是将其添加到项目中的方式：

npm install rss-parser（可能你还想卸载 rss-to-json）

npm install stream

npm install timers

我不知道为什么在安装 rss-parse lib 时最后两个没有自动添加为依赖项，但是在我们添加它们之前构建不会工作。
在 package.json 中添加以下块：

"browser": {
   "http": false,
   "https": false
}

需要这些行以避免与缺少节点部分相关的错误（因为我们在浏览器上，我们只是说我们不需要/使用它们）。

在您的代码中，去掉 public feed = require('rss-to-json');，因为它不会像那样工作。下面通过示例代码提供了一个关于如何使用 rss-parser 的示例：

import { Component, OnInit } from '@angular/core';

// Since we need the browser pre-bundled file, we need to
// manually reference it with the absolute path
import Parser from '../../node_modules/rss-parser/dist/rss-parser.min.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    const parser = new Parser();
    const feed = await parser.parseURL('https://cors-anywhere.herokuapp.com/https://www.reddit.com/.rss');

    console.log('received feed', feed);
  }
}

还有一个 parser.parseString() 方法用于解析预加载的 rss 提要。查看我在上面粘贴的 lib 官方链接以获取更多信息。

如您所见，即使使用这个库，事情似乎也有点笨拙，因为我们需要执行一些额外的步骤，但好处是即使使用最新版本的 Angular（v11），它也能正常编译和工作.1)，与 rss-to-json 相比没有。

Answer 2

import { Component, OnInit, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { AppsService } from '../services/apps.service';
import { IApps, Apps, IDataUser, DataUser, IClient, Client, IAppData, AppData } from '../models/apps.model';
import { NgxSpinnerService } from 'ngx-spinner';
import Parser from '../../../../node_modules/rss-parser/dist/rss-parser.min.js';

declare var require: any;
@Component({
  selector: 'rss-channel-content',
  templateUrl: './rss-channel.component.html',
  styleUrls: ['./rss-channel.component.scss'],
  providers: [
    AppsService,
    NgbModalConfig,
    NgbModal
  ]
})
export class RssChannelComponent implements OnInit {

  public isGallery: boolean = false;
  public is_view: boolean = false;
  public is_save: boolean = false;
  private id_app: string;
  public structure_app: IApps = new Apps();
  public form_data_user: FormGroup;
  public href: string = '';
  public url: string = '';
  public ocultar: boolean = false;
  //public feed = require('rss-to-json');
  public rss: any;
  
  constructor(
    private appsService: AppsService,
    private route: ActivatedRoute,
    private modalService: NgbModal,
    private router: Router,
    private spinner: NgxSpinnerService,
    private titleService: Title,
    @Inject(DOCUMENT) private _document: HTMLDocument
  ) { }

  ngOnInit() {
    this.spinner.show();
    this.id_app = this.route.snapshot.params['id'];
    this.getApplication();
    this.getUrl();
    //this.valueRSS();
  }
  private getUrl() {
    this.href = this.router.url;
    console.log(this.router.url);
    this.url = this.appsService.getUrl(this.href);
    console.log('url', this.url);

  }

  private getApplication() {
    this.appsService.getApp(this.id_app).subscribe(async (response) => {
      console.log('response', response);
      this.structure_app = response.response.options;
      this.titleService.setTitle(this.structure_app.name_app);
      this._document.getElementById('appFavicon').setAttribute('href', this.structure_app.icono_app);
      this.rss = await this.valueRss();
      this.is_view = true;
    }, (error) => {
      console.log(error);
    });
  }


  async valueRss(){
    return new Promise(async (resolve, reject) => {
      console.log(this.structure_app.rss_url);
      const parser = new Parser();
      await parser.parseURL(this.structure_app.rss_url, function (err, rss) {
      console.log(rss);
      resolve(rss);
    });
    this.spinner.hide();
  });
  }



  /**
   * changeColor
   */
  public changeColor(col: string, amt: any) {
    amt = amt === undefined ? -30 : amt;
    col = col === undefined ? '#eee' : col;
    return this.appsService.changeColor(col, amt);
  }

  public open(e: any) {
    this.modalService.open(e, { centered: true, size: 'lg' });
  }

}
after changing

Answer 3

创建另一个对 this 指针的引用并在异步调用和回调中使用

private getApplication() {
    const othis = this;
    this.appsService.getApp(this.id_app).subscribe(async (response) => {
      console.log('response', response);
      othis.structure_app = response.response.options;
      othis.titleService.setTitle(othis.structure_app.name_app);
      othis._document.getElementById('appFavicon').setAttribute('href', othis.structure_app.icono_app);
      othis.rss = await othis.valueRss();
      othis.is_view = true;
    }, (error) => {
      console.log(error);
    });
  }

  async valueRss() {
    const othis = this;
    return new Promise((resolve, reject) => {
        console.log(this.structure_app.rss_url);
        othis.feed.load(othis.structure_app.rss_url, function (err, rss) {
        console.log(rss);
        resolve(rss);
      });
      othis.spinner.hide();
    });
  }

检查这是否能解决您的问题

错误：未捕获（承诺）：TypeError：this.feed.load is not a function TypeError：this.feed.load is not a function

3 个答案: