发表于: 2017-05-23 22:53:02

1 898


2017-05-23 Day063

今天完成的事情

一行代码也没有写,没有成就感

明天计划的事情

今天计划的事情顺延。

遇到的问题

感觉就像是中了邪,基本语法都看不懂了,什么也看不进去。
ngOnChange(changes: {[propKey:string]: SimpleChanges}){...}这个都是什么。。。

收获

学习了一点组件间通信的基础:

1. 父子组件之间传递数据

a. 父到子组件间的数据传递
@Input装饰器
父组件//list.component.ts

....
export class ListCommponent implements OnInit {
//....
this.contacts = data;
}

子组件//item.component.ts

//@Input
...
export class ListItemCommponent implements OnInit {
@Input contact:any = {};
}

b. 子到父组件间的数据传递
使用事件绑定
子组件需要初始化一个用来订阅和触发自定义事件的EventEmitter类,并且由@Output装饰类修饰。
父组件//collection.component.ts

...
CollectionComponent implements OnInit {
 detail:any = {};
   collectTheContact() {
     this.detail.collection == 0 ? this.detail.collection = 1 : this.detail.collection = 0;
   }
}

子组件://contactCollect.component.ts

@Component({
 selector:'contact-collect',
 template:`
   <i [ngClass]="{collected: contact.collection}" (click)="collectTheContact"></i>
 `
})
...
export class ContactCollectComponent implements OnInit {
 @Output() onCollect = new EventEmitter<boolean>();
 collectTheContact(){
   this.onCollect.emit();
 }
}

点击事件触发时会触发父组件中的onCollect事件。



返回列表 返回列表
评论

    分享到