angular2 学习笔记 ( Component 组件)

Posted 2020-08-04 兴杰(stooges.com.my)

ng2 的组件和游览器原生的组件是同一个概念，在方方面面都很相似. 

 

和 ng1 一样，组件少不了数据绑定 

1. model to view 绑定 (单向绑定, 意思是这个值应该是只读的, 组件内部不一样修改这个值)

template: `
    <my-product [model-to-view-value]="‘Derrick‘ + ‘Yam‘" ></my-product>
`

@Input("model-to-view-value") //如果属性名字不一样的话可以调整
modelToViewValue: string;

 

2. 事件绑定 (监听嘛) 

selector: "my-app",
template: `
    <my-product (myClick)="doSomething($event)" ></my-product>
`
doSomething(data: string) { console.log(data) }


selector: "my-product",
template: `
    <div>this is product component</div>
    <div (click)="publish()" >publish</div>
`
@Output()
myClick: EventEmitter<string> = new EventEmitter();
publish() {
    this.myClick.emit("value");
}

 

3.双向绑定 

selector: "my-app",
template: `      
    <p> value outside :  {{ someValue }}</p>
    <div (click)="updateValue()" >update value from outside</div>
    <my-product [(someValue)]="someValue" ></my-product>
`
someValue: string = "value start";
updateValue() {
    this.someValue = "value updated from outside";
}


selector: "my-product",
template: ` 
    <div> value inside : {{ someValue }}</div>
    <div (click)="updateValue()" >update value from inside</div>
`
@Input()
someValue: string;
@Output()
someValueChange: EventEmitter<string> = new EventEmitter();      
updateValue() {
    this.someValueChange.emit("value updated from inside");
}

其实ng是通过数据绑定加上事件绑定来完成这事儿的, [(value)] 只是语法糖

把它拆开是这样的 

<my-product [someValue]="someValue" (someValueChange)="someValue = $event" ></my-product>

 

当我们绑定到原生游览器组件是有些概念要清楚.

1. dom Attribute 和 dom Property 不是同一个东西

  <img src="123.jpg" /> 写在 element 上的是 Attribute, 它的值只用来初始化 property 的值 

  imgDomObject.src = "456.jpg" 这个才是 property.

  ng 的绑定是在 property 上的. 

  Attribute 和 Property 不总是一对一匹配的, 有些 Attribute 是没有 property 的，这时我们要这样写 

  <some-elem [attr.attributeName]="..." > 要在前面加 attr.