Angular4 Injecting Service class - код в конструкторе не завершен, когда вызывается метод service?
Я пытаюсь попасть в Angular4/5. У меня есть подключение к службе CMS под названием Sanity ( https://www.sanity.io/). Проблема, с которой я столкнулся, заключается в том, что этот сервис внедряется в класс ProductsComponent, и я вызываю методы этого сервиса в методе компонента ngOnInit. Однако я получаю следующую ошибку при попытке перекомпилировать с помощью команды ng serve:
ERROR in src/app/sanity.service.ts(21,14): error TS2339: Property 'fetch' does not exist on type 'object'.
Вот компонент, где я внедряю сервис:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Query } from '@angular/core/src/metadata/di';
import { SanityService } from '../sanity.service';
@Component({
selector: 'app-product',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
products: object[];
constructor(private http: HttpClient, private sanityService: SanityService) { }
ngOnInit() {
this.sanityService.getProducts((res) => {
this.products = res;
});
}
}
вот код сервиса (sanity.service.ts):
import { Injectable } from '@angular/core';
//const sanityClient = require('@sanity/client');
import * as SanityClient from '@sanity/client';
@Injectable()
export class SanityService {
sanityClient: object;
constructor() {
this.sanityClient = SanityClient({
projectId: 'someidhere',
dataset: 'somedatabase',
useCdn: true
});
}
getProducts(callback) {
let query = "*[_type == 'product']{ name, _id, description, price, 'imageUrl': image.asset->url }";
this.sanityClient
.fetch(
query, // Query
{} // Params (optional)
).then(res => {
//console.log('5 movies: ', res)
//this.products = res;
callback(res);
}).catch(err => {
console.error('Oh no, error occured: ', err)
});
}
getProductById(id, callback) {
var query = `*[_id == '${id}']{ name, _id, description, price, 'imageUrl': image.asset->url }`;
this.sanityClient
.fetch(
query, // Query
{} // Params (optional)
).then(res => {
//console.log('PRODUCT: ', res)
//this.products = res;
callback(res);
}).catch(err => {
console.error('Oh no, error occured: ', err)
});
}
}
Я подозреваю, что объект, создаваемый / устанавливаемый в конструкторе службы, еще не завершил "загрузку", когда вызывается функция "getProducts()", и, таким образом, свойство "fetch" не существует с ошибкой.
Я действительно в тупике... кто-нибудь может мне помочь?
Также вот мой app.component.ts на всякий случай:
import { Component } from '@angular/core';
import { SanityService } from './sanity.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [SanityService]
})
export class AppComponent {
title = 'app';
constructor(private sanityService: SanityService) {}
}
2 ответа
Попробуйте ввести ваш SanityClient как any
или, если у вас есть набор текста, как SanityClient
, Ввод в качестве объекта указывает TypeScript рассматривать его как обычный объект без каких-либо дополнительных функций, поэтому эта ошибка выдается!
Так меняется sanityClient: object
в sanityClient: any
должно позволить вашему приложению компилироваться.
Вы можете создать интерфейс или класс Model, который содержит fetch
метод.
С интерфейсом:
export interface Fetch {
fetch
}
Или с моделью:
export class Fetch {
fetch
}
Поэтому после создания модели класса, например, импортируйте ее и сделайте следующее:
sanityClient: Fetch;
разницу между ними можно найти здесь.
Подумайте об использовании класса вместо интерфейса для сервисов и деклараций (компонентов, директив и каналов).
Рассмотрите возможность использования интерфейса для моделей данных.