• 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()之前它并没有任何特别之处。

  • 相关阅读:
    IP地址和进制转换
    Cisco交换机常见配置
    macOS上的autoreconf错误导致无法安装问题
    LG P5147 随机数生成器
    LG P1879 [USACO06NOV]Corn Fields G
    LG P5017 [NOIP2018]摆渡车
    mysql触发器trigger详解
    MybatisPuls中QueryWrapper的select、update的用法
    @Transactional各属性详解
    Linux如何查看进程、杀死进程、启动进程等常用命令(包括常用的命令,如查看文件,修改文件读写权限、寻找文件等)
  • 原文地址:https://www.cnblogs.com/sowhite/p/6306346.html
Copyright © 2020-2023  润新知