Angular：组件之间的通信@Input、@Output和ViewChild

ts：
export class HomeComponent implements OnInit {
  public hxTitle = ‘我是首页的头部‘;

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

  run(): void {
    alert(‘我是父组件的方法‘);
  }

}

html：
<app-header [hxTitle222]="hxTitle" [run]="run" [home]=‘this‘></app-header>

ts：
import { Component, OnInit, Input } from ‘@angular/core‘;

@Component({
  selector: ‘app-header‘,
  templateUrl: ‘./header.component.html‘,
  styleUrls: [‘./header.component.less‘]
})
export class HeaderComponent implements OnInit {

  @Input() hxTitle222: any;
  @Input() run: any;
  @Input() home: any;
  constructor() { }

  ngOnInit(): void {
  }
  getPRun(): void {
    this.run();
    this.home.run();
    console.log(this.home);
  }

}

html：
<p>{{hxTitle222}}</p>
<button (click)="getPRun()">我要执行父组件的方法</button>

ts:
import { Component, OnInit, Output, EventEmitter } from ‘@angular/core‘;

@Component({
  selector: ‘app-newschild‘,
  templateUrl: ‘./newschild.component.html‘,
  styleUrls: [‘./newschild.component.less‘]
})
export class NewschildComponent implements OnInit {
  public hxMsg = ‘我是新闻孩子的信息‘;
  @Output() hxMsg2 = new EventEmitter();
  constructor() { }

  ngOnInit(): void {
  }

  run(): void {
    alert(‘我是新闻孩子的run方法‘);
  }

  hxRun(): void {
    this.hxMsg2.emit(this.run);  //广播方法
  }
}

html:
<button (click)="hxRun()">我要触发事件，并将值传给父组件</button>

ts:
import { Component, OnInit} from ‘@angular/core‘;

@Component({
  selector: ‘app-news‘,
  templateUrl: ‘./news.component.html‘,
  styleUrls: [‘./news.component.less‘]
})
export class NewsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  getRun2(e): void {
    console.log(e);
  }
}

html:
<app-newschild (hxMsg2)="getRun2($event)"></app-newschild>