zoukankan      html  css  js  c++  java
  • [Angular 2] DI in Angular 2

    Orgial aritial --> Link

    The problem with Angular 1 DI:

    Angular 2 DI:

    • Solve the singletons problem:

    The service you inject to the parent component can be differnet with the one you inject to child component:

    var injector = ReflectiveInjector.resolveAndCreate([Engine]);
    var childInjector = injector.resolveAndCreateChild([Engine]);
    
    injector.get(Engine) !== childInjector.get(Engine);

    `resolveAndCreate` & `resolveAndCreateChild` are function to create injector.

    Even here use the same service `Engine`, but the instances are different.

    In Angular2, it looks like:

    // child component
    @Component({
      selector: 'child',
      providers: [Engine],
      template: '<h1> childcomponent !</h1>'
    })
    class Child{
      ...
    }
    
    
    // parnet component
    @Component({
      selector: 'parent',
      providers: [Engine],
      template: '<h1> parent component !</h1>'
    })
    class Parent {
      ...
    }

    The `Engine` we inject into Child component is a new instance, which is not the same as parent one.

    So what if we want to share the same instance?

    Well, If child component and parent component want the same service, then we only inject servie to parent component. The child component can access parent component's injected service.

    So in code, it will looks like:

    // child component
    @Component({
      selector: 'child',
      providers: [],
      template: '<h1> childcomponent !</h1>'
    })
    class Child{
      ...
    }
    
    
    // parnet component
    @Component({
      selector: 'parent',
      providers: [Engine],
      template: '<h1> parent component !</h1>'
    })
    class Parent {
      ...
    }

    We just remove 'Engine' from Child component, now they share the same service instance.

    • Solve name collision problem:

    Angular 2 allows you configure the service differently:

    1.  useClass:
    provide(Engine, {useClass: OtherEngine})

      2. useValue:

    provide(String, {useValue: 'Hello World'})

      3. useExisting:

    provide(V8, {useExisting: Engine})

      4. useFactory:

    provide(Engine, {useFactory: () => {
      return function () {
        if (IS_V8) {
          return new V8Engine();
        } else {
          return new V6Engine();
        }
      }
    }})

    Of course, a factory might have its own dependencies. Passing dependencies to factories is as easy as adding a list of tokens to the factory:

    provide(Engine, {
      useFactory: (car, engine) => {
    
      },
      deps: [Car, Engine]
    })
  • 相关阅读:
    paip.调用GUI接口.
    paip.按键替换映射总结
    paip.IIS 7.5 应用程序池,应用程序以及虚拟目录的存储位置
    paip.android 手机输入法制造大法
    paip.设置鼠标灵敏度API
    paip.系统无法在消息文件中为 Application 找到消息号为 0x2350 的消息文本。服务器存储空间不足,无法处理此命令
    paip.DEVSUIT WEB .NET ASPX网站打开慢的原因
    paip.动画透明淡入淡出窗口之重绘性能
    PAIP。JS调用DLL的解决方案
    paip.输入法编程四级非常用汉字汉字1000个
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5576367.html
Copyright © 2011-2022 走看看