Question

我已经使用SharePoint SPFX框架创建了一个项目，并添加了Angular（6.0或7.0）打字稿所需的必要软件包。看来Angular在我的spfx Webpart中工作，但是当我尝试使用Angular创建服务时，我无法使用component.ts文件中服务中可用的方法。尽管项目中未显示任何错误，但是当我尝试在component.ts文件中使用时，服务中声明的方法未定义

app.service.ts

import { Component, OnInit } from '@angular/core';  
import { Injectable } from '@angular/core';
export interface IDataService {
    getTitle(webUrl:string):string;
}
@Injectable()
export class SharePointService {
     constructor() {}     
     public getTitle(webUrl:string):string {
       return webUrl;
     }
  }

app.component.ts

import { Component, OnInit } from '@angular/core';  
import {IWebPartContext} from '@microsoft/sp-webpart-base'; 
import { IDataService } from './app.service';

@Component({  
  selector: 'my-spfx-app',  
  template: `<h3>Welcome to SPFx {{name}}!!</h3><p>{{serviceProp}}</p>`
})  
export class AppComponent implements OnInit  {  
    public name: string = '';  
    public context:IWebPartContext;
    public serviceProp:string = "";
    constructor(private dataService: IDataService){  
    }  

   public  ngOnInit() {
        this.context= window["webPartContext"];  
        this.name= this.context.pageContext.user.displayName;        
        this.serviceProp = this.dataService.getTitle("Angular Service Testing");
    }  
}

输出

欢迎使用SPFx用户1

数据未到达serviceProp变量。请帮助我们

Answer 1

您需要将类标记为类型而不是接口

private dataService: SharePointService

并且不要忘记在根模块或包含组件的功能模块中提供服务

`@Injectable({ provideIn: 'root' })`

带有Angular的SPFX-无法使用组件ts文件中的服务

1 个答案: