angular 学习之路1

最新推荐文章于 2024-11-17 22:57:09 发布

原创最新推荐文章于 2024-11-17 22:57:09 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #初学者

angular 专栏收录该内容

2 篇文章

订阅专栏

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

() 事件绑定

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

[()] 双向绑定 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,];
  }

}