子组件获取父组件数据和方法

<!-- 子组件 form -->
<app-form [shows]="shows" [run]="run" [news]="this">form 组件</app-form>

<!-- 父组件中定义 run 方法 -->
run(){
    alert('父组件方法')
 }

在父组件中挂载子组件,通过绑定属性的方法绑定传递给子组件的数据(属性,方法,包括父组件本身)
run是传递给子组件的方法,注意不要加()

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

在子组件中引入 Input 模块

export class FormComponent implements OnInit {

  @Input() shows:boolean
  @Input() run:any
  @Input() news:this

  constructor() { }
  ngOnInit(): void {
  }

  getrun(){
    this.run()
    alert(this.news.title)
  }
}

在子组件类中通过 @Input 装饰器接收父组件传递过来的数据(属性,方法,包括父组件本身)

<button (click)="getrun()">执行父组件方法</button>

子组件中定义方法执行父组件传递过来的方法

父组件获取子组件数据和方法

<app-form #formId>form 组件</app-form>
public msg = '子组件的一个msg'

在子组件挂载处定义个名称或者id,且定义一个获取数据和执行方法的事件

@ViewChild('formId') form: any

通过@ViewChild接受子组件传递过来的数据和方法

父组件中定义个方法
<button (click)="getchildMsg()">获取form子组件的msg</button>
<button (click)="getchildRun()">执行form子组件的方法</button>
 getchildMsg() {
    alert(this.form.msg)
  }
 getchildRun(){
    this.form.formrun()
  }

执行父组件中的事件就可以获得子组件的数据和方法

通过Output和EventEmitter

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

子组件中引入Output和EventEmitter

<button (click)="setrun()">通过@Output执行父组件数据</button>

@Output() private out = new EventEmitter()

setrun(){
    alert(this.out.emit('子组件的数据'))
}

子组件中定义方法,通过@Output()声明一个变量
子组件中实例化 EventEmitter
子组件中setrun是要执行的方法

<app-form (out)="run($event)">form 组件</app-form>
run(e) {
  console.log(e)
  alert('父组件方法')
}

父组件中定义一个方法接收,父组件中的run方法接收的就是子组件的方法执行时传递给父组件的数据