ng2学习笔记一

一、依赖注入在 Angular2 中，一个常见的依赖注入是注入一个 Http 对象，用于发送请求。

import {Component, OnInit} from 'angular2/core';  
import {Http} from 'angular2/http';//从 angular2/http 中将 Http import 进来


@Component({
  selector: 'test',
  providers: [Http]//在组件的配置中添加对应的 providers
})
class Test implements OnInit {  
  constructor(private http: Http) {//在 constructor 中声明一个参数
  }


  ngOnInit() {
    this.http.get('/api/user.json').map(res => res.json()).subscribe(result => {
      // 这里拿到请求的结果
    });
  }
}

上述代码是在 Angular 中使用内置 Http 模块发送请求的一段示例代码。具体依赖注入发生在 constructor 函数中。按照 Angular 宣传的那样，你只用简单的在 constructor 中声明这些参数，Angular 将自动为你处理依赖注入的问题。

注意到我们要使用 Http 来发请求，首先需要从 angular2/http 中将 Http import 进来，然后需要在组件的配置中添加对应的 providers，最后还需要在 constructor 中声明一个参数。

二、组件通信

在 Angular 中，父组件想要传递一些信息给子组件，还是比较简单的，直接使用属性绑定即可。在子组件中稍微麻烦一点，多声明一个 @Input。


这里还想吐槽两句，一个组件想要引用另一个组件，要先 import 进来，然后还要加到当前组件 Component 配置的 directives 属性中。开发过程中好多次莫名其妙的报错都是因为忘了这一步……

// Parent.js
@Component({
  selector: 'parent',
  template: `
    <h1>Parent</h1>
    <child [data]="data"></child>
  `
})
class Parent {  
  data = 'react';
}

// Child.js
@Component({
  selector: 'child',
  template: `
    <h4>Child</h4>
    <p>Data from parent: {{ data }}
  `
})
class Child {  
  @Input() data;
}

这个时候问题来了， 当子组件发生某些变化父组件想要知道的时候，你有这么几种选择。


1、在子组件中定一个 @Output 属性，然后父组件用 (event)="handler()" 的语法来监听这个事件
2、将父组件的一个 event handler 当做属性传给子组件，子组件通过调用这个方法来通知父组件（在 Redux 里，这很常见）（ 更新的官方文档里明确说明了不提倡使用这样的方式）
3、设计一个 Service 然后分别注入到父组件和子组件之中进行通信

在我开发这个项目的时候，Angular2 的官方文档中还没有任何教程说明组件之间沟通该如何进行（现在 有了 ），所以我果断选择了最 Redux 的那种。


结果发现，后来更新的官方文档里明确说明了不提倡使用这样的方式。


我只能说很心累……