使用Component注解的selector属性来告诉Angular2框架，当编译、链接模板时，如果 看到这个选择符，就实例化一个组件对象。

标签名选择符

@Component({selector:"ez-one",template:"TAGNAME-SELECTOR"})

将匹配：<ez-one>...</ez-one>

CSS类选择符

@Component({selector:".ez-two",template:"CSSCLASS-SELECTOR"})

将匹配： <any class="ez-two">...</any>

属性选择符

@Component({selector:"[ez-three]",template:"ATTR-SELECTOR"})

将匹配：<any ez-three>...</any>

属性值选择符

@Component({selector:"[ez-four=123]",template:"ATTRVAL-SELECTOR"})

<any ez-four=‘123‘>...</any>

ViewChildren

import {ViewChild, ViewChildren, Component, QueryList, ElementRef} from ‘@angular/core‘

@Component({
  selector: ‘my-app‘,
  template: `
  <input #myname  value="John Doe">
  <div #div1></div>
  <div #div2></div>
  <div #div3></div>

`
})
export class App {
  @ViewChild(‘myname‘) input:ElementRef;
  @ViewChildren(‘div1,div2,div3‘) divs:QueryList<ElementRef>;

  ngAfterViewInit() {
    console.log(this.input.nativeElement.value);
    console.debug(this.divs);
  }

}

@ViewChild 和 @ViewChildren 要在ngAfterViewInit生命周期钩子被触发后才被设置。

组件的生命周期

• ngOnChanges - 当输入/输出绑定的值改变时调用
• ngOnInit - 在第一次 ngOnChanges 后调用
• ngDoCheck - 自定义的方法，检测和处理值的改变
• ngAfterContentInit - 在组件内容初始化之后调用
• ngAfterContentChecked - 组件每次检查内容时调用
• ngAfterViewInit - 组件相应的视图初始化之后调用
• ngAfterViewChecked - 组件每次检查视图时调用
• ngOnDestroy - 指令销毁前调用。

#的运用：

创建一个本地变量 ，用于接收当前模板中的数据绑定和事件绑定表达式中的元素实例

<input type="text" #myInput />
<button (click)="onClick($event,myInput.value)">点击我</button>

ng-content的运用:

ng-content 可以指定 select 属性 语法为 select="selector",selector为选择器

@Component({
    selector: ‘multi-content‘,
    directives: [],
    template: `
        <ng-content select="[header]"></ng-content>
        <ng-content select=".body"></ng-content>
    `
})
export class MultiContent {

}

@Component({
    selector: ‘app‘,
    directives:[MultiContent],
    template: `
        <multi-content>
            <div header>hello</div>
            <div class="body">world</div>
        </multi-content>
    `,
})
export class App {

}

Angular2中忽略绑定   ngNonBindable

<div>Ignored Binding:
    <div ngNonBindable>{{10 * 10}}</div>
</div>
<div>Executed Binding:
    <div>{{10 * 10}}</div>
</div>

第一个表达式的输出将是{{10 * 10}}。第二个表达式将执行作为常规角表达式，并打印100

TypeScript中的set和get

import {Component} from ‘@angular/core‘;
@Component({
    template: `
        <input [(ngModel)]="name" />
    `
})

export class App{
    public _string: string = "123";

    get name(): string{
        return this._string
    }
    set name(val: string){
        this._string = val;
        console.log(val);
    } 

}