> 我们定义一个 header 和index组件 > 并且在 index中引入header和footer,这个时候index作为父组件,header作为子组件 > index.component.ts ~~~ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-index', templateUrl: './index.component.html', styleUrls: ['./index.component.css'] }) export class IndexComponent implements OnInit { constructor() { } public title:string="当前访问的index"; ngOnInit(): void { } public fatherFunction():void{ alert("父组件的function") } } ~~~ >index.html ,使用[]动态属性把function传入不要加() ~~~ <app-header [title]="title" [fatherFunction]="fatherFunction"></app-header> <p>我是主页组件!</p> <div></div> ~~~ ***** >header.component.ts 1. ## 引入 Input 模块 2. Input装饰器 绑定 父组件 刚才[]传过来的 变量和function 3. 新建子组件方法,调用父组件的 []动态绑定 ~~~ import {Component, OnInit, Input} from '@angular/core'; //映入input模块 @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit { @Input() title: string; @Input() fatherFunction: any; constructor() { } ngOnInit(): void { } public callFatherFunction(): void { this.fatherFunction(); } } ~~~ >header.html ~~~ <p> 我是头部组件! {{title}} </p> <button (click)="callFatherFunction()">点击执行父组件的function</button> <hr> ~~~ ## 可以把整个 父组件传给子组件 例如 ~~~ <app-header [title]="title" [fatherFunction]="fatherFunction" [father]="this"></app-header> ~~~