zoukankan      html  css  js  c++  java
  • angular依赖注入(1)——从父元素到子元素的数据注入

    1.什么是依赖注入?

    依赖注入是一种编程模式,可以让类从外部源中获得它的依赖,不必亲自创建他们。

    (这就达到了一个效果,我不知道我是怎么实现的,但我创建了一个实现他的接口,然后接口封装起来,1.可以分离关注。2.可以简化思路 3.可以语义更接近实际);

    2.为什么需要依赖注入?

    为了方便测试,分离关注的原则。

    服务是个分离关注点,不同等级和类型的服务放在它自己的文件里。

    3.实现的步骤?

    1.配置注入器;

      不需要创建Angular注入器。angular在启动过程中会自动创建一个应用级的注入器(就只最大的注入器)。

      在main.ts里

    platformBrowserDynamic().bootstrapModule(AppModule);

      AppModule是最大的注入器,其他的注入在AppModule里先。

    2.AppModule里注册提供商,也可以在组件中注册提供商;

      @NgModule和@Component里存在着providers属性;通过它来注入一些提供商。选择哪一种取决于提供商的服务是给多大的范围内的组件使用;

    3.在子元素的组件里边调用注入器提供的方法。

     1 import { Component }   from '@angular/core';
     2 import { Hero }        from './hero';
     3 import { HeroService } from './hero.service';
     4 @Component({
     5   selector: 'hero-list',
     6   template: `
     7   <div *ngFor="let hero of heroes">
     8     {{hero.id}} - {{hero.name}}
     9   </div>
    10   `
    11 })
    12 export class HeroListComponent {
    13   heroes: Hero[];
    14   constructor(heroService: HeroService) {  //注意这里的引入方式和下一行的调用方式
    15     this.heroes = heroService.getHeroes();
    16   }
    17 }

      备注:这段代码就会实现一个服务,这个服务的功能可以通过调用HeroService的getHeroes方法获得HEROES;虽然看起来并没有什么意义,但是还是会在语义上强大起来,而且想象以下代码量非常大的时候。服务只是一个类,在没有@injectable()之前它并没有任何特别之处。

  • 相关阅读:
    BZOJ 1452 Count(二维树状数组)
    BZOJ 1407 Savage(拓展欧几里得)
    BZOJ 1415 聪聪和可可(期望DP)
    BZOJ 1406 密码箱(数论)
    最大流小结
    UVA6531Go up the ultras
    二分图小结
    Codeforces Round #243 (Div. 1)
    图论模板集合
    zoj3416 Balanced Number
  • 原文地址:https://www.cnblogs.com/sowhite/p/6306346.html
Copyright © 2011-2022 走看看