angular 父子组件传值及通讯

----------------------------父组件，传递属性到子组件-----------------------------------------------------------------
在子组件应用：
  @Input() title: any

父组件，传值
<app-header [title]="'你好，我是来自form页面的title'"></app-header>

-----------------------------父组件，传递方法到子组件----------------------------------------------------------------
父组件，传方法：show
<app-header [title]="'你好，我是来自form页面的title'" [run]="show"></app-header>

子组件，获取父组件的方法
  @Input() run: any
//测试方法的传递
  test(): void {
      this.run();
  }

---------------------------------父组件，主动调用子组件的属性+方法-------------------------------------------
<app-header #myheader [title]="'你好，我是来自form页面的title'" [run]="show"></app-header>
import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
 @ViewChild('myheader', {static: true}) myheader: any

 public ngAfterViewInit() {
    console.log(this.myheader.aaa)
  }
  show() {
    alert(this.myheader.aaa)
    this.bbb = this.myheader.aaa
  }

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


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  // title = "你好，世界，我是一个头部组件"
  @Input() title: any
  @Input() run: any

  public aaa = "我是header里面的属性";

  constructor() {
  }

  ngOnInit(): void {
  }

  //测试方法的传递
  test(): void {
    this.run();
  }

  test2(): void {
    alert(this.aaa)
  }
}

<p>header works!</p>
<h1>{{title}}</h1>

<input type="button" value="点击我(head)" (click)="test()"/>

import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
import {SearchService} from '../../services/search.service'

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  @ViewChild('myheader', {static: true}) myheader: any
  bbb = ''

  form = {
    name: '',
    sex: "1",
    city: '',
    cityList: ['南昌', '梅州', '深圳'],
    loveList: [
      {title: '爬山', checked: true},
      {title: '篮球', checked: false},
      {title: '羽毛球', checked: true},
    ]
  }

  sname = ''

  constructor(public store: SearchService) {
    this.sname = this.store.systemName


  }


  ngOnInit(): void {
  }

  public ngAfterViewInit() {
    console.log(this.myheader.aaa)
  }

  show() {
    alert(this.myheader.aaa)
    this.bbb = this.myheader.aaa
  }
}

<app-header #myheader [title]="'你好，我是来自form页面的title'" [run]="show"></app-header>
myheader:{{bbb}}
<input type="button" value="点击我(form)" (click)="show()"/>
<h2>人员登记系统</h2>

<div class="people_list">
  <p>{{sname}}</p>

  <p>  {{form | json}}</p>

  <ul>
    <li>姓名：<input type="text" [(ngModel)]="form.name"/></li>
    <li>性别：<input type="radio" name="sex" value="1" [(ngModel)]="form.sex"/>男
      <input type="radio" name="sex" value="0" [(ngModel)]="form.sex"/>女
    </li>
    <li>
      所在城市：
      <select name="city" [(ngModel)]="form.city">
        <option *ngFor="let item of form.cityList">{{item}}</option>
      </select>
    </li>
    <li>兴趣爱好：
      <span *ngFor="let item of form.loveList;let index = index;">
            <input type="checkbox" [name]="'love'+index" [(ngModel)]="item.checked"/>{{item.title}}
         </span>
    </li>
  </ul>
</div>