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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangdan_2013/article/details/80338839

父组件向子组件传递数据

  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学习笔记(一) — 之安装教程

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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页