angular父子通信

父子通过操作dom通信

父组件：

@ViewChild("childBox") childBox

callChild() {
    this.childBox.run()
  }

子组件：

run() {
    alert("我是子组件中的方法");
  }

父组件向子组件传值

父组件：

点击可以改变孙子组件的msg

callMsg:string;
callGrandson() {
    this.callMsg='父组件向子组件传递信息'
  }

子组件：

  callMsg:{{callMsg}}

import { Component, OnInit, Input} from '@angular/core';
// 引入input装饰器
...
@Input() callMsg:any

子组件直接将整个父组件拿过来使用

父组件：

  ...
  visitildeMsg = '一条消息';
  ...

子组件：

...
@Input() child:any

getRun() {
    alert(this.child.visitildeMsg)
  }

子组件使用父组件的方法

父组件：

 run(e:any) {
    alert(e*10);
  }

子组件：

执行父组件的方法


 import { Component, OnInit, Input} from '@angular/core';
// 引入input装饰器
...
 @Input() run:any
 
 getRun() {
    this.run(6)
  }

子组件通过@Output触发父组件的方法

子组件：

通过@Output给父组件广播数据

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
//引入Output和EventEmitter
...
  @Output () private outer = new EventEmitter();

 //给父组件广播数据
  sendparent() {
    this.outer.emit('子组件的数据')
  }
  

父组件：

 getMyChild(e) {
    //e 子组件给父组件广播的数据
    alert(e)
  }