Ответ 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' } );

    }
}

Ваш комментарий будет приветствоваться.