Pesquisa de site

typescript - Quando precisamos criar um serviço no Angular?


Por exemplo, eu tenho algumas funções fooA(), fooB() ... que são usadas em muitos componentes.

Devo envolver esses métodos em uma classe de serviço e injetá-los, ou apenas exportar uma classe com essas funções estáticas?

Envolver em serviço:

...
@Injectable()
export class SampleService {
    fooA() {...}

    fooB() {...}
}

@Component({
    ...
    providers: [SampleService]
})
export class SampleComponent {
    constructor(private sampleService: SampleService) {...}

    method() {
        this.sampleService.fooA();
    }
}

Basta exportar uma classe:

export class Utils {
    static fooA() {...}

    static fooB() {...}
}

@Component({...})
export class SampleComponent {
    method() {
        Utils.fooA();
    }
}

Resposta #1

Se você tiver métodos que são reutilizados, você deve criar um serviço compartilhado. Ou criar um componente base com esses métodos e estender seu componente a partir do componente base.

Resposta #2

Você pode criar um serviço Angular geralmente para compartilhar funcionalidades entre componentes que não têm necessariamente uma relação de pai-filho ou são componentes irmãos. Dessa forma, você pode encapsular melhor a funcionalidade que deseja em um serviço e injetá-la no construtor do componente onde deseja usá-la.

Por exemplo, se você quiser criar uma comunicação assíncrona para compartilhar dados entre dois componentes, você pode criar um serviço usando a biblioteca RxJS e permitir que os componentes se inscrevam em mensagens que desejam receber, ou criar um subject para enviar dados para outros componentes.

Você pode ler sobre alguns exemplos aqui:

interação de componentes Angular

formas-de-comunicar-entre-componentes-angular

Para o seu exemplo, ao invés de copiar a funcionalidade de fooA() e fooB() em cada componente, para um design melhor e encapsulamento de código, você pode criar um serviço Angular usando o decorador Injectable, e injetar esse serviço em cada componente onde você precisa chamar essas funções.

Quando você escolhe exportar essas funções, elas estarão disponíveis para uso em todos os componentes; em vez disso, você pode escolher apenas usá-las injetando um serviço.