angular组件

来源:互联网 发布:淘宝怎么退订短信 编辑:程序博客网 时间:2024/06/05 18:49

参考大漠穷秋老师的教程:https://my.oschina.net/mumu/blog/834254

内容提要

  • 组件
    TS代码、模板(数据绑定、事件绑定)、外观与动效、把服务注入给组件
  • 组件间通讯
    @Input与@Output、借助于Service
  • ContentChild与ViewChild 高级内容,暂时没提
  • 生命周期钩子
  • 管道

数据绑定

插值表达式绑定

export class AppComponent {  title = 'Tour of Heroes';  hero = 'Windstorm';}
template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`

双向绑定

<input [(ngModel)]="hero.name" placeholder="name">