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]
    })
  • 相关阅读:
    Linux学习之网络基础
    C# 随笔
    最牛B的编码套路
    c++ Primer 第七章不熟悉知识点总结
    oracle求表的倒数二行数据
    c++ Primer 第六章不熟悉知识点总结
    c++ Primer 第五章不熟悉知识点总结
    c++ Primer 第四章不熟悉知识点总结
    c++ Primer 第三章不熟悉知识点总结
    骑驴找马
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5576367.html
Copyright © 2011-2022 走看看