У меня проблема с загрузкой класса в угловой компонент. Я пытался решить это в течение долгого времени; Я даже пытался объединить все это в один файл. Что у меня есть:
Application.ts
/// <reference path="../typings/angular2/angular2.d.ts" />
import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";
@Component({
selector:'my-app',
injectables: [NameService]
})
@View({
template:'<h1>Hi {{name}}</h1>' +
'<p>Friends</p>' +
'<ul>' +
' <li *ng-for="#name of names">{{name}}</li>' +
'</ul>',
directives:[NgFor]
})
class MyAppComponent
{
name:string;
names:Array<string>;
constructor(nameService:NameService)
{
this.name = 'Michal';
this.names = nameService.getNames();
}
}
bootstrap(MyAppComponent);
услуги / NameService.ts
export class NameService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
getNames()
{
return this.names;
}
}
Я продолжаю получать сообщение об ошибке, говорящее No provider for NameService
.
Может ли кто-нибудь помочь мне определить проблему с моим кодом?
typescript
angular
systemjs
M.Svrcek
источник
источник
Ответы:
Вы должны использовать
providers
вместоinjectables
Полный пример кода здесь .
источник
providers
работ над последней бета-версией (бета 0).bindings
В Angular 2 есть три места, где вы можете «предоставлять» услуги:
«Параметр поставщика начальной загрузки предназначен для настройки и переопределения собственных предварительно зарегистрированных служб Angular, таких как поддержка маршрутизации». - ссылка
Если вам нужен только один экземпляр NameService для всего вашего приложения (т. Е. Singleton), включите его в
providers
массив вашего корневого компонента:Plunker
Если вы предпочитаете иметь один экземпляр для каждого компонента, используйте
providers
вместо этого массив в объекте конфигурации компонента:См. Документ Hierarchical Injectors для получения дополнительной информации.
источник
Начиная с Angular 2 Beta:
Добавьте
@Injectable
к своему сервису как:и к конфигурации вашего компонента добавьте
providers
как:источник
Вы должны быть инъекционные
NameService
внутриproviders
массива вашейAppModule
«sNgModule
метаданных.Если вы хотите создать зависимость для определенного уровня компонента, не заботясь о состоянии вашего приложения, вы можете добавить эту зависимость к
providers
параметру метаданных компонента, как показано в ответе принятого @Klass .источник
DataManagerService
имеет ли@Injectable
декоратор над ним?Шокирующе, синтаксис снова изменился в последней версии Angular :-) Из документов Angular 6 :
ЦСИ / приложение / user.service.0.ts
источник
Вы должны внедрять NameService в массив провайдеров метаданных NgModule вашего AppModule.
и убедитесь, что импорт в ваш компонент с тем же именем (чувствителен к регистру), потому что SystemJs чувствительны к регистру (по замыслу). Если вы используете другое имя пути в ваших файлах проекта, как это:
main.module.ts
ваш-component.ts
тогда система js сделает двойной импорт
источник
В Angular v2 и выше это сейчас:
@Component({ selector:'my-app', providers: [NameService], template: ... })
источник
Angular 2 изменился, вот как должна выглядеть верхняя часть вашего кода:
Кроме того, вы можете использовать геттеры и сеттеры в вашем сервисе:
Тогда в вашем приложении вы можете просто сделать:
Я предлагаю вам перейти на plnkr.co и создать новый плагин Angular 2 (ES6) и заставить его работать там в первую очередь. Это все настроит для вас. Как только он там заработает, скопируйте его в другую среду и устраните любые проблемы с этой средой.
источник
Ошибка
No provider for NameService
является распространенной проблемой, с которой сталкиваются многие начинающие пользователи Angular2.Причина : перед использованием любой пользовательской службы сначала необходимо зарегистрировать ее в NgModule, добавив в список поставщиков:
Решение:
источник
Вы также можете иметь зависимости, объявленные в команде bootstrap, например:
По крайней мере, это то, что сработало для меня в alpha40.
это ссылка: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
источник
Привет, Вы можете использовать это в своем файле .ts:
Сначала импортируйте ваш сервис в этот файл .ts:
Затем в тот же файл вы можете добавить
providers: [Your_Service_Name]
:источник
Добавьте это к поставщикам, не вводимым
источник
В Angular вы можете зарегистрировать сервис двумя способами:
1. Зарегистрируйте сервис в модуле или корневом компоненте
Последствия:
Вам следует позаботиться о регистрации службы в загруженном модуле:
Сервис доступен только для компонентов, объявленных в этом модуле.
Услуга будет доступна на пожизненном приложении только при загрузке модуля
2. Зарегистрируйте сервис в любом другом компоненте приложения.
Последствия:
Вы должны позаботиться, если вы зарегистрируете сервис в любом другом компоненте приложения.
Экземпляр внедренной службы будет доступен только компоненту и всем его дочерним элементам.
Экземпляр будет доступен во время жизни компонента.
источник
Вам необходимо добавить его в массив провайдеров, который включает в себя все зависимости от вашего компонента.
Посмотрите на этот раздел в угловой документации:
Так что в вашем случае просто замените инъекционные препараты на поставщиков, как показано ниже:
Также в новых версиях Angular, @View и некоторых других вещей нет.
Для получения дополнительной информации посетите здесь .
источник
добавьте свой сервис в массив provider [] в файле app.module.ts. Как ниже
// здесь мой сервис CarService
app.module.ts
источник
Angular2 требует, чтобы вы объявляли все инъекции в вызове функции начальной загрузки. Без этого ваш сервис не является инъекционным объектом.
источник
providers
массив в объекте конфигурации компонента. Если он включен вproviders
массив, мы получаем один экземпляр на связанный компонент. См. Документ Hierarchical Injectors для получения дополнительной информации.Добавьте @Injectable к вашему сервису как:
и в вашем компоненте добавьте поставщиков как:
или если вы хотите получить доступ к своему сервису по всему приложению, вы можете передать его в провайдера
источник
Регистрация провайдеров в компоненте
Вот пересмотренный HeroesComponent, который регистрирует HeroService в массиве провайдеров.
источник