angular的父子组件通信

通信：父传子：{Input}

//父 
<app-child [num]="count"></app-child>

// 子html
<h1>我是父传过来的：{{num}}</h1>
// 子ts
import { Input } from '@angular/core';
 @Input() num:any;
// 使用别名： @Input('num') myNum:any;

---

通信：子传父 ：（通过事件）

自定义事件（也是子传参给父）:2个新东西{EventEmitter,Output}

// 父组件html：
<app-kk (myClick)="add()"></app-kk>
<app-kk (myClick)="add($event)"></app-kk>  *传参数写法*
//父ts
add(){
    this.count ++;
  }
// ********************
// 子组件html
    <button (click)="kkAdd()">我是kk组件Btn</button>
// 子ts:
// 引入 EventEmitter,Output 
①   import { EventEmitter,Output } from '@angular/core'

②   @Output() myClick = new EventEmitter();

③   kkAdd(){
        // this.myClick.emit()
       *传参数写法* this.myClick.emit("kkkkk") // 传递参数叫：payload 载荷(传参)
    }

---

双向数据绑定：[(ngModel)]的使用

1. // 第一种方法：使用插件

// 组件html
<input type="text" [(ngModel)]="text">

// app.module.ts  文件
①  import { FormsModule } from '@angular/forms'

②  imports: [
    FormsModule
  ],

2. 第二种方法，input方法，也可以(keyup)

// 使用input事件绑定value 
<input type="text" (input)="changeVal($event)">
changeVal(e:any):void{
    this.text = e.target.value
  }