如何在Angular视图组件中调用服务类的函数？

要在Angular视图里调用服务中的removeHTML函数，你需要完成以下几步：

1. 确保服务被正确提供 #

首先给GeneralService添加根注入装饰器，让整个应用都能访问到它（Angular 6+推荐方式）：

// generalservice.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 自动注册到根注入器
})
export class GeneralService {
  constructor() { }

  removeHTML(str: any) { 
    const tmp = document.createElement("DIV");
    tmp.innerHTML = str;
    return tmp.textContent || tmp.innerText || "";
  }
}

如果是旧版本Angular，也可以在AppModule的providers数组中手动添加GeneralService。

2. 在组件中注入服务 #

在app.component.ts的构造函数中注入GeneralService，并赋值给组件的公共属性（确保视图能访问到）：

// app.component.ts
import { Component } from '@angular/core';
import { GeneralService } from './generalservice'; // 注意路径要匹配你的文件结构

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  allBlogs: any[] = [];
  // 把服务实例暴露给视图
  constructor(public generalService: GeneralService) {}

  doSomething() {
    // 补充完整你的Observable订阅逻辑（比如HTTP请求）
    yourDataObservable.subscribe(data => {
      this.allBlogs = data.blogs.data;
    });
  }
}

3. 在视图中调用服务方法 #

修改app.component.html，通过组件的服务实例调用removeHTML：

<!-- app.component.html -->
<div class="post-item border" *ngFor="let blog of allBlogs">
  {{ generalService.removeHTML(blog.heading) }}
</div>

额外提示 #

• 视图只能访问组件的公共属性/方法，不能直接调用未注入的服务函数
• 如果*ngFor循环数据量大，建议提前在组件中处理HTML移除逻辑（比如订阅数据时就把heading处理好），避免视图频繁执行函数影响性能

内容的提问来源于stack exchange，提问作者Abhishek