标签：
使用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>
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生命周期钩子被触发后才被设置。
创建一个本地变量 ，用于接收当前模板中的数据绑定和事件绑定表达式中的元素实例
<input type="text" #myInput /> <button (click)="onClick($event,myInput.value)">点击我</button>
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 { }
<div>Ignored Binding: <div ngNonBindable>{{10 * 10}}</div> </div> <div>Executed Binding: <div>{{10 * 10}}</div> </div>
第一个表达式的输出将是{{10 * 10}}。第二个表达式将执行作为常规角表达式，并打印100
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);
}
}
标签：
原文地址：http://www.cnblogs.com/bq-med/p/5318534.html
