javascript - injeção de dependência angular 6




typescript angular-cli (3)

Na versão mais recente do Angular 6, um serviço é registrado em um módulo usando a propriedade providedIn nos metadados do serviço:

@Injectable({
  providedIn: 'root',
})
export class HeroService {}

No entanto, a documentação também se refere ao registro do serviço na matriz de providers módulo nos metadados do módulo, assim como fizemos no Angular 5:

@NgModule({
  providers: [HeroService],
})
export class AppModule {}

Assim,

  • Qual método deve ser usado para conscientizar o injetor do serviço que ele deve injetar?
  • O método array dos providers módulos será preterido?

Basicamente você pode usar qualquer um, mas como por nova CLI, o provideIn será automaticamente adicionado ao criar o service

Fornecido em

Existe agora uma maneira nova e recomendada de registrar um provedor, diretamente dentro do decorador @Injectable() , usando o novo atributo providedIn. Aceita 'root' como um valor ou qualquer módulo da sua aplicação. Quando você usa 'root' , seu injetável será registrado como um singleton no aplicativo, e você não precisa adicioná-lo aos provedores do módulo raiz. Da mesma forma, se você usar providedIn: UsersModule , o injetável será registrado como um provedor do UsersModule sem adicioná-lo aos provedores do módulo.

Esta nova maneira foi introduzida para ter uma melhor agilidade na aplicação. Atualmente, um serviço adicionado aos provedores de um módulo terminará no pacote final, mesmo que não seja usado no aplicativo, o que é um pouco triste.

Para mais informações, por favor, consulte aqui


Como sempre, quando várias soluções estão disponíveis, depende do que você deseja alcançar. Mas a documentação dá a você algumas diretivas para escolher.

Às vezes, não é desejável que um serviço seja sempre fornecido no injetor de raiz do aplicativo. Talvez os usuários devam optar explicitamente por usar o serviço, ou o serviço deve ser fornecido em um contexto carregado com lentidão. Nesse caso, o provedor deve estar associado a uma @NgModule class específica e será usado pelo injetor que incluir esse módulo.

Então, basicamente, você usará providedIn: 'root' para quaisquer serviços que sejam de ampla aplicação. Para outros serviços, continue usando a versão antiga.

Não se esqueça de que você já teve a opção de prestar serviço de forma diferente. Por exemplo, também é possível declarar injetável no nível do componente (isso não muda na V6).

  @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    providers: [ MyService ]
  })

Dessa forma, o serviço fica disponível apenas no MyComponent e na árvore de subcomponentes.


Se você estiver usando o desenvolvedor 5+ angular, ele criará automaticamente o serviço injetável quando declarado como providedIn: 'root', nesse caso, você não precisará importar o serviço em app.module.ts. Você pode usá-lo diretamente em outro componente.





angular6