SPFX с Angular - не в состоянии использовать службу в файле компонента TS - PullRequest
Новая
       14

SPFX с Angular - не в состоянии использовать службу в файле компонента TS

0 голосов
/ 29 мая 2019

Я создал проект с использованием инфраструктуры SharePoint SPFX и добавил необходимые пакеты, необходимые для машинописного ввода Angular (6.0 или 7.0). Кажется, что Angular работает в моей веб-части spfx, но когда я пытаюсь создать сервис с использованием 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 User1

Данные не поступают в переменную serviceProp. Пожалуйста, помогите нам

1 Ответ

0 голосов
/ 29 мая 2019

Вам необходимо пометить класс как тип вместо интерфейса 

private dataService: SharePointService

и не забудьте предоставить сервис либо в корневом модуле, либо в функциональном модуле, который содержит компонент 

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