Они объявляются в разных местах (декларации и провайдеры). Я знаю, что служба @Injectable() должна быть добавлена в конструктор компонентов, которые используют эту службу. Но почему это должно быть так? Почему мы не можем просто объявить в одном месте? Какие функции, которые можно сделать, чтобы другие не могли?
Какая разница между Сервисом и Компонентом в Угловом 2+?
Ответ 1
Составная часть
Это в основном класс с декоратором @Component, который говорит угловым, что класс является компонентом.
Они всегда связаны с HTML-шаблоном и некоторым CSS.
Когда часть html повторяется с аналогичной функциональностью, всегда лучше поместить ее в компонент. Этот компонент можно назвать везде, где требуется одна и та же функциональность.
Сервисы
Они являются центральными единицами для некоторых общих функций в приложении.
Это простые классы с функциями и членами.
Используется, когда - Дублирование кода существует, Доступ/сохранение данных.
Для служб не существует декоратора, в отличие от @Component и @Directive. @Injectable используется только тогда, когда один сервис должен использоваться компонентом, директивой или другой службой.
Ответ 2
Я новичок в Angular, но вот мое понимание.
Составная часть
Из документов:
Угловые компоненты являются подмножеством директив. В отличие от директив, компоненты всегда имеют шаблон, и для каждого элемента в шаблоне может быть создан только один компонент.
По сути, компонент представляет собой небольшой фрагмент HTML, CSS и Javascript, который инкапсулирует некоторую часть вашего приложения, которую вы хотите отобразить.
обслуживание
Сервис предоставляет функциональность, которую вы можете использовать в нескольких частях вашего приложения. Скажем, вы хотите показать конкретную информацию о пользователе по нескольким компонентам, но не хотите повторять код, вы поместите этот код в службу. Затем вы должны внедрить службу в свой компонент и вызвать пользователя, показывающего код внутри компонента, из службы.
Декоратор @Injectable() используется, когда вы хотите внедрить другие сервисы внутри декорируемого сервиса, и вам не нужно включать его, когда вы используете сервис в своем компоненте.
Ответ 3
Основная основная разница
"Когда мы хотели получить доступ к методу одного компонента в другом, мы должны создать объект и получить к нему доступ. Но @Injectable сообщает нам или методам Service, к которым мы можем получить доступ, просто используя Injecting Service в Constructor(), поскольку Service - это Singleton я Я повторяю, что Сервис является Singleton, то есть только один объект из каждой услуги доступен во всем приложении.
Пример: конструктор (частный http: HttpClient, частный toastService: ToastService)
здесь я просто создал переменную для типа HttpClient и доступа к методам get/post/put. ToastService - это моя частная служба доступа к моим собственным службам.
Составная часть
Надеюсь, вы знаете, что в AngularJS мы использовали для написания отдельного файла script.js для обработки событий, написания методов, вызова API или проверки, а затем мы получаем доступ к этому файлу в формате html следующим образом
мы используем @Component для компонента. Таким образом, Компонент просто как файл сценария с добавленными дополнительными функциями. например, мы можем экспортировать компонент и использовать его в любом месте приложения, ориентированные на Angular 2 объектно-ориентированные функции, а не импортировать внешние сценарии, CSS файлы, они предоставляют поддержку для этого и т.д.
@Component( {
selector: 'app-unit',
templateUrl: './unit.component.html',
styleUrls: ['./unit.component.css']
} )
export class MyComponent implements OnInit {
constructor( private http: HttpClient , private toastService: ToastService) { }
ngOnInit() {
this.fetchAllUnit();
}
}
Сервисы
Мы используем @Injectable для сервисов. Службы используются для общих методов для некоторых общих функций в разных компонентах. Это простые классы с функциями и членами, а не html-содержимым. Используется, когда - требуется уменьшить дублирование кода для доступа или хранения данных.
import { Injectable } from '@angular/core';
@Injectable( {
providedIn: 'root'
} )
export class ToastService {
constructor() { }
public error( msg ) {
M.toast( { html: msg, classes: 'red darken-2 rounded' } );
}
public success( msg ) {
M.toast( { html: msg, classes: 'green lighten-1 rounded' } );
}
public warning( msg ) {
M.toast( { html: msg, classes: 'yellow darken-4 rounded' } );
}
}
Ваш комментарий будет приветствоваться.