Angular2 组件

1. 组件说明

Angular2 组件是构成Angular2应用程序的核心部分，Angualr2应用程序本质上来说就是一个组件树，Angular2组件一般由模块，注解，元数据以及组件类组成，实现组件类逻辑和视图模板的相互交互。来看下面的这个简单的组件的例子：

 

2. 模块

模块是一个内聚的代码块，用来实现某种单一的功能，可以进行导入来使用模块内的变量，类或者函数等，如下所示，组件需要导入一些该组件使用到的函数，其他组件，服务等模块，例如，从 @angular/core中导入Component函数，导入其他依赖组件HeaderComponent等。

import { Component, OnInit, Inject, ViewChild} from '@angular/core';

import { HeaderComponent } from './header';

import { DetailsComponent } from './details';

import { ButtonComponent } from './button';

import { EPO_PR_HEAD_P2P } from '../../model';

import { PrStore } from '../../store';

import { PrService } from '../../service';

3. 注解

从@angular/core中导入Component函数后，可以使用@Component()来标示组件类为一个Component，@标示注解的一种标识，用来对组件类福建对应的元数据信息。

4. 元数据

@Component将元数据的信息附加到组件类上，我们来详细了解一下常用的组件元数据信息都有哪些：

@Component({

    moduleId: "pr-input-mkt",

    selector: 'pr-input-mkt',

    //inline template

    template: `

        <ui-header [header]="PrEntity.header"></ui-header>

        <ui-details [details]="PrEntity.details"></ui-details>

       <ui-button [header]="PrEntity.header" (onsubmit)="dosubmit($event)"></ui-button>

    `,

    //out template

    templateUrl: `./template.html`,

    directives: [HeaderComponent, DetailsComponent, ButtonComponent],

    pipes: [DatePipe],

    providers: [PrService]

})

moduleId：组件标识ID，用来区分各个组件，主要作用于相对路径使用组件，可以准确定位到组件。

selector：选择器名称，在组件使用过程中，充当模板中的标识，类似a标签中的a。这个属性信息是必须的，必须精确的指定在模板中所使用的标签定义，可以为属性，标签或者样式类等，例子中使用是采用标签的形式使用的。

template/templateUrl：组件对应的模板，template是组件内部的用法，引入外部模板文件使用templateUrl。

directives：在组件模板中使用的其他组件或者指令，引入以后可以在模板中进行使用。

pipes：管道集合，组件模板中使用到的管道，引入后可以在模板中进行使用。

providers：服务提供者集合，依赖注入系统的部分，配置了那些新的服务会引入到组件类中进行使用。

5. 组件类

组件类作为组件的核心代码区域，包含了组件的逻辑以及视图的显示数据信息。组件类的用户主要是体现在输入和输出两个部分。

5.1 Input

输入使用@Input()注解来表示，将父组件的数据绑定到对应的子组件的属性中。例如 HeaderComponent 组件中，使用@Input() 来附加输入属性到header上。

import { Component, OnInit, Input,  } from '@angular/core';

 

import { EPO_PR_HEAD_P2P} from '../../model';

import { PrService } from '../../service';

 

@Component({

    selector: 'ui-header',

    template: `

        <form class="form-horizontal" role="form" (change)="change($event)">

            <div class="form-group">

                <legend>Form title</legend>

            </div>

 

            <div class="input-group">

                <div class="input-group-addon">ID</div>

                <input type="text" class="form-control" name="ID" [ngModel]="header.ID" placeholder="Amount">

            </div>

                      

        </form>

    `

})

export class HeaderComponent implements OnInit {

    _init: boolean = false;

 

    @Input()

header: EPO_PR_HEAD_P2P;

}

那么如何在父组件中如何调用呢，其实非常简单，实际上就是模板语法中属性的绑定方式，将父组件中的数据传递到子组件中。

<ui-header [header]="PrEntity.header"></ui-header>

5.2 Output

输入使用@ Output ()注解来表示，将子组件触发的事件提交到父组件中。例如 ButtonComponent组件中，使用@ Output () 来创建一个事件触发器onsave，当点击save按钮的时候触发onsave事件，并传递对应的数据’save’。

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

 

@Component({

    selector: 'ui-button',

    template: `

    <div class="btn-group">

        <button type="button" class="btn btn-default" (click)="save($event)">save</button>

    </div>

`

})

export class ButtonComponent implements OnInit {

    @Output()

    onsave = new EventEmitter();

 

    constructor() { }

 

    ngOnInit() { }

 

    save($event) {

        this.onsave.emit('save');

    }

}

那么如何在父组件中如何调用呢，和组件输入相似，不过本次采用的是模板语法中事件的绑定方式，$event表示传递的参数信息，当点击子组件save按钮的时候的时候，父组件中的dosave方法便会执行。

<ui-button  (onsave)="dosave($event)"></ui-button>