父组件向子组件传递数据
首先我们创建一个simple-app项目,在项目中,再创建一个子组件
ChildComponent
。修改子组件的文件
- 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
属性
下面我修改父组件
- 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学习笔记(一) — 之安装教程
系列学习文章还会继续更新下去,有兴趣的小伙伴欢迎加入。