1.父子组件传参：

使用@Input()装饰器绑定父组件上的参数

父组件的html

<div class="card">
  <!-- 演示父子组件传参 -->
  <app-title [title]="title" [run]="run" [card]="this"></app-title>
  这是一个card组件
</div>

父组件的component

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

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  title:string = 'card title'
  constructor() { }

  ngOnInit(): void {
  }
  // 父组件的run 方法
  run(){
    console.log('父组件的run方法')
  }
}

子组件的component

//需要在angular的核心模块中引入Input模块
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.scss']
})
export class TitleComponent implements OnInit {
  @Input() title:any;
  @Input() run:any;
  @Input() card:any; // 通过this可以拿到整个父级别的实例
  constructor() { }

  ngOnInit(): void {
  }
  // 子组件调用父组件的方法
  goback(){
    this.run()
  }
}

该过程可以传递普通的参数，也可以传递方法，也可以通过传递this拿到整个父级的实例

2.子组件向父组件传参：

使用@ViewChild('childId')可以拿到整个的子组件的实例

父组件html

<div>
  这是一个home组件
  <!-- 获取子组件的所有的实例 -->
<app-footer #footer></app-footer>
<button (click)="getFooter()">获取子组件的数据</button>
</div>

父组件component

// 需要导入ViewChild 装饰器
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  @ViewChild("footer") footer: any
  constructor() { }

  ngOnInit(): void {
  }
  getFooter(){
    console.log(this.footer)
    this.footer.getFooter()
  }
}

子组件componet

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  getFooter(){
    alert('我是子组件的footer方法')
  }

}

使用@Output() 装饰器，广播的形式向父组件进行传参

父组件的html

<div>
  这是一个home组件
  <!-- output 事件广播的形式调用父组件的方法  绑定的方法需要和子组件广播的时候定义的变量保持一致 -->
<app-footer #footer (output)="getHome($event)"></app-footer>
<button (click)="getFooter()">获取子组件的数据</button>
</div>

父组件的component

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  @ViewChild("footer") footer: any
  constructor() { }

  ngOnInit(): void {
  }
  getFooter(){
    console.log(this.footer)
    this.footer.getFooter()
  }
  // 接受到了广播的方法
  getHome(data: any){
    console.log(data)
    alert('接受到了子组件广播的方法')
  }
}

子组件的componet

// 需要使用@Output()装饰器 和 EventEmitter事件驱动
import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
// 实例化事件的驱动
  @Output() output = new EventEmitter()
  constructor() { }

  ngOnInit(): void {
  }
  getFooter(){
    alert('我是子组件的footer方法')
  }
  // 调用父组的方法
  emitEvent(){
  // 使用emit进行广播数据
    this.output.emit('我是子组件的数据')
  }
}