angular 学习之路1

loadSuccess

于 2017-08-24 14:44:49 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular 初学者

本文链接：https://blog.youkuaiyun.com/loadSuccess/article/details/77529875

angular 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Angular中的事件绑定、属性绑定及双向绑定方法，并详细解析了如何通过@input与@output进行组件间通信。此外，还提供了一个使用Input装饰器实现父子组件通信的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

() 事件绑定

{{}} [] 属性绑定值绑定

[()] 双向绑定 view--model

<div class="container" [@flyIn]="'active'">
  <!--引用动画效果赋值给active-->

组件之间的通讯： @input与@output，借助于service

生命周期钩子

Input 示例父组件需要通过属性绑定

 [rating]="product.rating"

实现父子组件通信，注意需要在angular/core 中引入Input 模块

import { Component, OnInit ,Input} from '@angular/core';

@Component({
  selector: 'app-starts',
  templateUrl: './starts.component.html',
  styleUrls: ['./starts.component.css']
})
export class StartsComponent implements OnInit {
  @Input()
  private rating:number = 0;
  private stars:boolean[];     //组件私有属性
  constructor() { }

  ngOnInit() {
    this.stars = [true,true,true,true,true,];
  }

}