子组件获得父组件的数据
从两个方向来详解这个操作,以父组件中有一个msg传入子组件中形成一个标题元素为例。
对于子组件:
1.需要引入Input
import { Component, OnInit,Input } from '@angular/core';
2.定义这个传入的msg
@Input() message:any;
3,关于显示问题,子组件和父组件都有对应的html文件,此时子组件的html应当是展示出这个数据
<p>{{message}}</p>
对于父组件:
1.也需要定义这个传出到子组件的参数
msg = "父组件传入给子组件的值"
2.父组件的html修改如下
<app-testmodule [message]="msg" ></app-testmodule>
左边中括号内message相当于在子组件中定义的message,这里是把右边父组件中msg的值绑定给了子组件,这个步骤是子父组件传值的桥梁。
父组件获得子组件的数据
1,通过ViewChild
对于父组件:
只需要调用ViewChild 连接子组件
@ViewChild("组件名字") child : any;
假设有一个子组件方法为run()或者子组件数据为value,使用如下方法调用
this.组件名字.run();
this.组件名字.value;
对于子组件 :
需要在子组件中定义好上述值和方法,然后再父组件的html中定义好自己的id
2,通过Output和EventEmitter
对于子组件:
需要引入output和EventEmitter,随后定义这个驱动事件EventEmitter
@Output outer = new EventEmitter();
然后定义一个方法传递这个
send(){this.outer.emit(“数据”);}
对于父组件:
只需要在引入子组件模块的时候作如下定义
<app-child #child (outer)="run($event)"></app-child>//父组件中的run方法
run(e){
console(e);
}
//这里父组件通过这个outer连接到子组件,然后接收了传递过来的值"数据",随后把这个打印在了控制台