Angular父组件给子组件传参

父传子(父传给子数据 和 方法)

父:

<app-header [title]='title' [fn]='fn' [home]='this'></app-header>

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

@Component({
  selector:'app-home',
  templateUrl:'./home.component.html',
  styleUrls:['./home.component.scss'],
})

export class HomeComponent implements OnInit{
	public title:string="父组件标题";
	constructor(){}
	ngOnInit(){
		
	}
	fn(){ //传给子组件的方法
		alert("父组件方法")
	}
}

子:

<header>{{title}}<header>
<button (click)="getParentFn()">子组件执行父组件方法</button>

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

@Component({
  selector:'app-header',
  templateUrl:'./header.component.html',
  styleUrls:['./header.component.scss'],
})

export class HeaderComponent implements OnInit{
	//通过 Input 获取父组件传来的值
	@Input() title:any; //获取父组件 传来的数据
	@Input() fn:any; //获取父组件方法
	@Input() home:any; //整个父组件实例
	constructor(){}
	ngOnInit(){
	}
	//调用父组件方法
	getParentFn(){
		this.fn() //调用父组件传来的方法
		this.home.fn() //调用父组件传来的整个实例中的 fn方法
	}
}