Angular2学习笔记-组件及其选项介绍

组件是构成angular2应用的基本单元，angular应用就是由一棵组件树组成的。我们可以在组件的模板内容中调用其他的组件，并可以向该组件传递值以及响应该组件的事件（即组件的输入输出）。另外，组件继承自指令（Directive），也就是说组件其实是一种特殊的指令。

组件的实现

实现组件仅用实现一个类（这里都是用TypeScript实现），并使用@Component修饰符修饰该类，填写该修饰符必要的信息。
1.从angular核心包中引入Component修饰符
import { Component } from '@angular/core';
2.填写修饰符中的选项

@Component({
  selector: 'my-app',
  template: '
My First Angular App
'
})

selector:一个CSS选择器，声明后就能在其他模板或html中使用。
template:内联模板，如上。也能使用templateUrl，直接使用一个模板HTML文件

3.实现一个并导出一个类
export class AppComponent { }
以上只实现一个空类，并声明export。这样才能在模块中引入，被其他组件使用，或作为根组件。

完整代码（该组件没有任何实际作用，仅显示了一个标题）：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '
My First Angular App
'
})
export class AppComponent { }

修饰器中的选项

若需要组件实现一些更强大的功能，则需要对组件的一些选项进行声明，下面介绍一些目前接触到的选项，以后慢慢补充。

//sub component
import { Component, EventEmitter } from '@angular/core';

@Component({
  selector: 'sub-app',
  template: '
{{ massage }}
',
  inputs: ['massage'],
  outputs: ['outputText'],
  styles:[`
    h2{color:red}
  `],
})
export class SubComponent { 
    massage: string;
    outputText = new EventEmitter();

    hasclick(){
        this.outputText.emit("massage been clicked");
    }
}

//跟组件
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  
My First Angular App
  
  `
})
export class AppComponent { 
    alert(str: string){
        alert(str);
    }
}

以上代码定义了一个SubComponent类，该类接受一个message输入，并有个outputText的事件输出：

1.selector：用来标识组件的css选择器，建议加上自己的前缀，避免重复
2.inputs:属性名列表，用来绑定组件需要的输入。 。massage为该组件的一个属性，声明为一个输入inputs: ['massage']，这样在AppComponent组件中就能给message传递值。可以使用@Input修饰符来起到相同的效果，@Input('alias') property: type，alias为property的别名，给属性传入值时可以使用给别名。
3.outputs:属性名列表，暴露该组件包含的事件。angular应用是一棵组件树，inputs声明由父组件向子组件需要传递的信息，outputs则声明子组件向父组件传递的信息，该信息通过事件来。输出属性必须是一个EventEmitter类的实例，该实例通过调用emit方法来发出事件,代码为this.outputText.emit("massage been clicked");,则上面例子在标题在点击后将发出一个事件，父组件通过声明的属性(outputText)="alert($event);"进行监听，$event为emit发出的信息。同样也能使用@Output修饰符实现。
4.template/templateUrl:内联的HTML内容，或通过HTML模板引入
5.styles/styleUrls:样式数组，可以使用styles写内联样式，或使用stylesUrl引入样式文件。注意styles/styleUrls由数组组成，通常包含一个string就够了。

styles:[`
    h2{color:red}
`],

6.provides：注册服务提供商，通常用来声明组件中要使用的服务，这是angular依赖注入器所需要的配置。也可以中模块中声明，这样该模块中所有的组件都能使用。
7.animations：组件使用到的动画

声明组件中的其他一些选项

API中声名的其他一些选项，还没有实际用到，有些看英文还好理解些：

1.changeDetection:组件用到的变更检测策略，不填则采用的默认策略，在组件输入有变更或有事件触发时，会调用变更检测。可以声明为一种onpush策略，这里不介绍。
2.entryComponents:被动态插入到给组件视图中的组件列表
3.encapsulation：样式封装策略
4.host：宿主元素的样式、类的映射

  host: {
    'style': 'display: table; height: 100%; background-color: red',
    'class': 'myClass'
  }

5.exportAs：name under which the component instance is exported in a template，在用到表单部分是就会用到这个名字（ngModel,ngForm)。
6.interpolation：自定义的插值标记
7.queries：configure queries that can be injected into the component
8.viewProviders：list of providers available to this component and its view children
9.moduleId：ES/CommonJS module id of the file in which this component is defined