Angular学习笔记（二）

7、依赖注入

可以提高代码的可测试性和松耦合

注入器：

是将某个服务注入到当前的组件或者服务中来，从而可以调用该服务。注入的方式是通过组件的构造函数将服务进行注入。constructor(private productService: ProductService){}这样就是把ProductService注入到了当前的组件中。

提供器：

通过在NgModule中的providers中添加相应的服务，来向外提供服务。但是在providers中提供服务的方式有如下几种： providers: [ProductService]//① providers: [{provider: ProductService, useClass: ProduceService}]//② providers: [{provider: ProductService, useClass：              {AnotherProduceService}]//③ providers: [{provider: ProductService, useFactory: () => {...}]//④ 说明：方式①是简单的一个声明，来为其他组件提供服务      方式②指定了当别人要使用provider为ProductService服务时，应该用useClass指         定的ProduceService服务来进行实例化该服务，这中方式的作用和① 的作用一样。      方式③指定了当别人要使用provider为ProductService服务时，应该用useClass指         定的AnotherProduceService服务来进行实例化该服务，注意这种方式和② 的区            别，此时不再是使用ProductService来实例化。      方式④则是使用一个工厂来提供实例化的对象，如下所示： provide:ProductService,useFactory: (logger: LoggerService, isDev) => {    if(isDev){      return new ProductService(logger);    }else{      return new AnotherProductService(logger);    }  },  deps: [LoggerService, "IS_DEV_ENV"]}    这个的作用就是向useFactory的工厂方法中传入两个参数logger和isDev,这两个参数的值是在deps: [LoggerService, "IS_DEV_ENV"]进行指定的，然后在函数体内，根据isDev来返回相应的实例化的类，并将logger传递进去。注意：a、@Component是已经继承了@Injectable，因此可以在组件中是可以使用依赖注入的b、使用工厂方法创建的对象只会实例化一次，即：providers: [{provider: ProductService, useFactory: () => {...}]中ProductService的实例都是同一个对象。

8、数据绑定

①、属性绑定

说明：a、插值绑定和属性绑定是一样的，属于DOM属性绑定  <img [src] = "imgUrl"></img>  <img src = "{{imgUrl}}"></img>b、html属性和dom属性的区别  <input value="tom" (input)="doInput($event)">  value属性是指input这个标签的dom属性  (input)是绑定了输入事件在后台的ts组件中：  doInput(event:any){    console.log(event.target.value);//此时打印的是dom属性    console.log(event.target.getAttribute('value'));//此时打印的是html属性  }HTML和DOM的区别在于：a、定义的input标签中的value属性的值是html属性，其值一直都是tom，所以第二行打印出来的  HTML属性值一直都是tom。b、input标签对应的输入框每当输入框的值发生改变了所对应的就是dom属性值的改变，因此第一行打印会将每次input输入框中的值打印出来。HTML属性和DOM属性的关系：1、少量的HTML属性和DOM属性之间有着1:1的关系，比如：id2、有些HTML属性没有对应的DOM属性，如colspan3、有些DOM属性没有对应的HTML属性，如textContent4、即使名字相同，HTML属性和DOM属性也不是同一样东西5、HTML的值指定了初始值；DOM的值表示当前值6、DOM属性的值可以改变，HTML的值不可以改变7、模板绑定是通过DOM属性的和事件进行绑定的，而不是HTML属性

9、组件之间的通信

学习内容

1、组件的输入输出属性2、使用中间人模式传递数据3、组件生命周期以及angular的变化发现机制

输入属性

注意：1、input的数据传递是单向的，只能由父组件传递给子组件，即子组件属性的变化不会影响父组件的属性值2、一定要给需要传递参数进来的子组件的参数添加@Input()标签steps：s1:在子组件中对需要传入参数值的属性加上@Input标签：    @Input()    amount: number;    @Input()    stockCode: string;s2:在父组件的模板中调用子组件，并将子组件所需要的输入属性的值传入：    <app-order [stockCode]="stock" [amount]="100"></app-order>s3:通过父组件像stock属性传值：    <input placeholder="输入股票代码" [(ngModel)]="stock">

通过构造函数传递路由信息来传递值

说明：除了上述的使用Input标签进行组件之间的传值之外，还可以在子组件的构造器中依赖注入一个routerInfo:ActivatedRoute，然后在通过订阅或者快照的方式获取路由中的信息，进而实现通过路由来进行组件之间的信息传递。

输出属性

说明：输出属性是将该组件的某些属性信息告知其他组件。应用的场景：当某个组件产生的数据可以提供给其他组件使用的时候，可以使用输出属性，例如：报价组件获取当前的最新股票的价格，然后由其他需要知道股票价格的组件来获取其中的股票价格。Steps:s1、首先在需要创建一个将要用来封装输出属性值的类：PriceQuote(stockCode,price)s2、在组件中创建一个EventEmitter对象用来发射输出属性值：  @Output()  lastQuotePrice:EventEmitter<QuotePrice>=new EventEmitter();其中注意EventEmitter是带有一个泛型，其传入的类型就是将要发射出去的数据的类型，同时还需要添加@Output()标签，可以在@Output()的()中添加该发射器的名称，以提供给其他组件使用，若不提供，则默认是变量名：lastQuotePrice。s3、获取最新的股票信息，然后通过发射器的emit函数将股票信息发射出去：this.lastQuotePrice.emit(lastQuote);其中lastQuote则封装了最新的股票信息。s4、在需要调用该股票组件的组件中，首先调用该股票组件，然后，在股票组件的调用模块上添加事件，该事件就是在股票组件中定义的EventEmitter对象名称，或者是由@Output()指定的名称：<app-price-quote (lastQuotePrice)="lastQuoteHandler($event)"></app-price-quote>其中(lastQuotePrice)和其他的事件绑定一样，然后lastQuoteHandler($event)是处理事件的方法，传入一个$event参数。s5、然后在调用组件中编写处理lastQuotePrice事件的方法lastQuoteHandler()：lastQuote:QuotePrice=new QuotePrice('',0);lastQuoteHandler(event:QuotePrice) {  this.lastQuote = event;}注意，传入的$event的类型就是在股票组件中定义的要发射的属性的类型。这就实现了由一个组件向另一个组件发射属性值的方法，但是注意一点的是，这种方式也是存在于父子组件之间的信息传递。

中间人模式

  当两个组件之间没有任何关联，此时进行通讯是借助两个组件的共同父组件，如图所示：4组件和5组件的共同父组件是2组件，4和5之间传递消息可以由2进行中转。

Steps:
s1、在组件4中创建一个事件发射器，将需要通知出去的数据经过发射器进行发射：
@Output()
currentQuotePrice:EventEmitter =new EventEmitter();
buyStock(event){
this.currentQuotePrice.emit(new QuotePrice(
this.stockCode,this.lastPrice));
}
即表示在组件4中每当调用方法buyStock的时候就通过发射器currentQuotePrice将当前的股票信息发射出去。注意事项跟前面的一样。
s2、在组件5中创建输入属性，用来将来自父组件的属性值进行显示出来：
@Input()
quotePrice: QuotePrice;
s3、在4和5的共同父组件中调用4组件和5组件：