angular子组件获取父组件的方法

angular子组件执行父组件的方法

父组件定义方法

父组件定义方法

<app-header [title]="city" [run]='run'></app-header>

ts文件

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  public city:string = '武汉'

  constructor() { }

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

子组件获取父组件定义方法

<p>我是头部组件{{title}}</p>
<button (click)="getFun()">执行父组件的run()方法</button>

TS文件

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() title:any
    @Input() run:any
    constructor() { }

    ngOnInit(): void {
    }
    getFun(){
      this.run()  // 我是父组件的run方法
    }
  }

上面就是子组件执行父组件的方法