Angular学习笔记（三） --- 父子组件通信 @Input 与 @OutInput 详解 （ 上 ）

父组件向子组件传递数据

1. 首先我们创建一个simple-app项目，在项目中，再创建一个子组件ChildComponent。

2. 修改子组件的文件

   • child.component.html

<div class="childBox">
  <p>子组件</p>
  <div>父组件的名称：{{parent?.name}}</div>
</div>

- child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements  OnChanges {

  constructor() { }

  @Input() parent: any;

  ngOnChanges() {
    console.log(this.parent);
  }
}

这里我们接受从父组件传递的一个对象，并且展示对象的name属性

1. 下面我修改父组件

   • app.compontent.html

<div class="parentBox">
  <p>父组件</p>
  <label>姓名：</label>
  <input type="text" value={{parent.name}} [(ngModel)]="parent.name">
  <input type="button" value="向子组件传递信息" (click)="next()">
</div>

<div class="childBox">
  <app-child [parent]="parent_data"></app-child>
</div>

- app.compontent.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  private parent: Object = {
    name: 'app-root'
  };
  private parent_data: any;

  next() {
    this.parent_data = this.parent;
  }

}

这样我们的父组件和子组件的内容都确定了，下面我们打开界面，看看浏览器给我们展示的内容

当我们点击按钮，就会显示出父组件传递name，同时，我们可以在input中输入字符，可以发现，子组件的内容是跟随变化的。

还实现了一个onChanges接口。

onChanges接口必须实现ngOnChanges方法，用来监控数据的变化，如果父组件的数据发生变化，我们这里就输出改变后的数据，父组件中表单输入的值发生变化，再点击按钮调用next()方法,ngonChanges会检测到数据变化， console.log(this.parent)打印新的输出到控制台。

总结

Angular学习笔记（二） — 生命周期钩子
Angular学习笔记（一） — 之安装教程

系列学习文章还会继续更新下去，有兴趣的小伙伴欢迎加入。